html - 为什么 "margin: auto"不使元素垂直居中？

Question

正如您在下面的演示中看到的，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>

我的问题不是寻求解决方法。

Answer 1

如前所述，此行为在 section 10.6.2 中指定。 CSS2.1，并且与CSS2保持不变.

block 盒按正常流向从上到下垂直堆叠。此外，vertical margins may collapse ，并且仅在某些情况下这样做(在您的演示中，父元素上的边框将防止子元素上的任何边距与其自身折叠)。如果你只有一个这样的 block 盒，并且包含 block 的高度是自动的，那么它的顶部和底部边距无论如何都将为零。但是如果你在同一个流中有多个 block 框，或者甚至影响流入框布局的流外框(例如在 clearance 的情况下)，你会如何期望自动边距解决对于那些流入框？

这就是为什么内联元素(包括原子内联)和 float 元素(尽管水平边距永远不会折叠)的自动左右边距同样被清零的原因。行内级框是 laid along line boxes ，漂浮物也服从unique layout rules .

绝对定位的盒子是一个不同的故事:因为它们永远不会意识到与自己处于相同定位上下文中的任何其他盒子，auto top and bottom margins can be calculated for them with respect to their containing blocks无需担心任何其他盒子的干扰。

Flexbox 也是一个不同的故事:flex 布局与 block 布局的不同之处在于，根据定义，flex 元素总是知道同一 flex 格式化上下文中的其他 flex 元素，包括没有其他 flex 元素的事实。特别是，neither can floats intrude into the flex container, nor can you float flex items to subvert this (尽管您仍然可以使用 absolute positioning 完全从 flex 布局中删除子元素)。部分由于这个原因，边距与 flex 元素的行为非常不同。参见章节 4.2 , 9.5和 9.6 .