1

我正在查看一些代码，虽然它有效，但我不明白下面的 CSS 是如何使内部 div 居中的。

Codepen 演示也可用。

HTML

<div class='outer'>
  <div class='inner'></div>
</div>

CSS

div {
  border: 1px solid black;
  box-sizing: border-box;
}

.outer {
  position: absolute;
  background-color: goldenrod;
  width: 100%;
  height: 100%;
}
.outer .inner {
  width: 75%;
  height: 75%;
  background-color: green;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
}
4

3 回答 3

1

只是因为

 margin: auto;

您可以从Box Model中更好地理解这一点。

于 2013-03-20T14:53:52.340 回答
1

这是你的问题的答案。

只是告诉浏览器在margin: auto元素的左侧和右侧之间平均分配可用空间。按可用空间，父容器左右边缘之间的任何未占用的水平空间。

参考

于 2013-03-20T15:18:10.803 回答
0

出于某种原因，工作中的同事不想要甜蜜的 SO 点，所以这是他的答案。

如果你要放

top: 0;
bottom: 0;
left: 0;
right: 0;

在没有高度或宽度的普通 div 上，它会使 div 成为其容器的整个大小。height将and放在width那个 div 上会限制它，虽然它会尝试填充它的容器，但它会尊重设置的尺寸。

margin: auto;如上所述的设置是关键。这允许此 div 的框通过在尊重其设置尺寸的同时平等扩展边距来填充其容器。

这是使事情居中的最佳方式吗？不知道，但它有效。

于 2013-03-20T15:30:42.077 回答