Question

我已经看到了在网站上以其他人的代码为中心元素的模式：

＆＃13;

img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

＆＃13;

<img src="https://placebear.com/200/300" alt="picture-one" />

＆＃13;

工作正常。毫无疑问！

但我无法想象CSS代码实际上做了什么。

我见过类似的代码，其中使用了定位将子元素扩展到它的父元素的大小。

＆＃13;

#child {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: lime;
}

#wrap {
  width: 100%;
  height: 800px;
}

＆＃13;

<div id="wrap">
  <div id="child"></div>
</div>

＆＃13;

但是这对我来说毫无意义。

有人可以解释一下这些首次展示的技术是如何运作的吗？

单个属性的作用以及它最终如何实现它的结果？

我很感激。

Answer 1

#child {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100px;
  width: 250px;
  margin: auto;
  background-color: lime;
}

#wrap {
  width: 100%;
  height: 800px;
}

<div id="wrap">
  <div id="child"></div>
</div>

这是因为图像有默认的宽度和高度。

使用时

position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;

元素将获得窗口大小并将元素放在其中。

#child {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100px;
  width: 250px;
  margin: auto;
  background-color: lime;
}

#wrap {
  width: 100%;
  height: 800px;
  position: relative;
}

<div id="wrap">
  <div id="child"></div>
</div>

因此，如果您将位置相对于#wrap，则绝对位置#child将调整为父级。

希望它有所帮助！干杯！

Answer 2

position: absolute允许您设置元素从整个页面边缘的顶部，底部，右侧和左侧的距离。

在第二个例子中你甚至认为#wrap设置为800px的高度，页面每边的#child距离设置为0.因此它覆盖了整个页面！

希望这有帮助！

Answer 3

#inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100px;
  width: 250px;
  margin: auto;
  background-color: #000; border:1px solid #fff;
}

#container {
  width: 100%;
  height: 800px;
}

<div id="container">
  <div id="inner"></div>
</div>

CSS：position：absolute with margin：auto for centering - 这是如何工作的？

3 个答案: