正如您在下面的演示中看到的，margin: auto;以蓝色为中心div水平方向，但不是垂直方向。为什么不？
.box {
border: 1px solid red;
width: 100px;
height: 100px;
}
.center {
background: blue;
width: 50px;
height: 50px;
margin: auto;
}
<div class="box">
<div class="center"></div>
</div>
我的问题不是要求解决方法。
如前所述，此行为在第10.6.2节CSS2.1的，并保持不变CSS2.
块箱按正常流程从上到下垂直堆叠。此外，垂直边距可能会塌陷，并且仅在某些情况下才这样做（在您的演示中，父元素上的边框将防止子元素上的任何边距与其自身的边距折叠）。如果你只有一个这样的块框，并且包含块的高度是自动的，那么它的顶部和底部边距无论如何都将为零。但是，如果同一流中有多个块框，甚至流外框会影响流内框的布局（在以下情况下）清除例如），您希望如何解决这些流入框的自动边距问题？
这就是为什么内联元素（包括原子内联）和浮动的自动左右边距同样被清零（尽管水平边距永远不会折叠）。内联级框是沿线框放置，并且浮动也服从独特的布局规则.
绝对定位的盒子是一个不同的故事：因为它们永远不知道与自己处于相同定位上下文中的任何其他盒子，自动顶部和底部边距can相对于它们的包含块来计算它们无需担心任何其他盒子的干扰。
Flexbox 也是一个不同的故事：Flex 布局与块布局的不同之处在于，Flex 项目根据定义始终了解同一 Flex 格式化上下文中的其他 Flex 项目，包括不存在的事实。尤其，浮动既不能侵入 Flex 容器，也不能浮动 Flex 项目来颠覆这一点（尽管您仍然可以使用以下命令从 Flex 布局中完全删除子元素绝对定位）。部分由于这个原因，弹性项目的边距表现非常不同。参见章节4.2, 9.5 and 9.6.
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
