Question

出于某种原因，我的父div（#box_one）通过使用（#box_one{ margin: 10px auto 10px auto; }）完全正确地在我的页面中居中，但当我尝试使用相同的技术时它的子元素（{{1} }）它只是垂直居中。有人可以解释为什么会这样吗？

#box_one > div

Answer 1

您需要向子width

添加明确的div

＆＃13;

#box_one {
  border: 1px solid black;
  width: 400px;
  margin: 10px auto;
}
#box_one > div {
  height: 200px;
  border: 1px solid black;
  margin: 10px auto;
  width: 50%
}

＆＃13;

<div id="box_one">
  <div></div>
</div>

＆＃13;

`

Answer 2

从技术上讲，子元素是的中心，因为它的自动水平边距都被清零了。原因是因为您的子元素与#box_one本身不同，因此没有设置宽度。

当未明确设置块框的宽度（display: block）或设置为自动时，框将水平拉伸以适合其包含的块resulting in its auto horizontal margins being zeroed out：

如果＆＃39;宽度＆＃39;设置为＆＃39; auto＆＃39;，任何其他＆＃39; auto＆＃39;价值观成为＆＃39; 0＆＃39;和＃＆＃39;宽度＆＃39;从产生的平等开始。

Answer 3

只需为#box_one > div{}添加一个宽度，您就会变得金色。

为什么不是我的保证金：10px auto;工作？

3 个答案: