为什么"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

如上所述,此行为在CSS2.1的第10.6.2节中指定,并且与CSS2保持不变.

在正常流动中,块箱从顶部到底部垂直堆叠.此外,垂直利润率可能会崩溃,只有在某些情况下这样做(在您的演示,父元素的边界将防止子元素上的任何利润从自己的崩溃).如果你只有一个这样的块盒,并且包含块的高度是auto,那么它的顶部和底部边距无论如何都将为零.但是,如果你有一个以上的块框影响的,周转箱的布局(在的情况下,在相同的流量,甚至外的周转箱通关为例),你会怎么想到汽车的利润来解决这些流入箱？

这就是为什么自动左右边距同样归零为内联元素(包括原子内联)和浮点数(尽管水平边距永不崩溃).内联级框沿线框放置,浮动也遵循独特的布局规则.

绝对定位的盒子是一个不同的故事:因为他们从来没有意识到与自身相同的定位环境中的任何其他盒子,所以可以针对它们的包含块计算自动顶部和底部边距,而不必担心任何其他盒子干扰.

Flexbox也是一个不同的故事:将flex布局与块布局区分开来的是,flex项目根据定义始终知道同一个flex格式化上下文中的其他flex项目,包括没有的事实.特别是,既不能浮动进入Flex容器,也不能浮动flex项来破坏它(尽管你仍然可以通过绝对定位完全从flex布局中移除子元素).由于部分原因,边距与弹性项目的表现非常不同.见第4.2,9.5和9.6.

Answer 2

为什么......因为W3C规范是这么说的.

如果'margin-top'或'margin-bottom'为'auto',则其使用值为0.

至于实际的"为什么"......那里的查询应该真正得到解决.

Answer 3

它不会垂直居中元素,因为它是正常流程中的块级元素.因此,以下规则适用:

如果margin-top,或者margin-bottom是auto,他们使用的值是0.

值得指出的是,上述规则也适用于以下要素:( 有关更多信息和条件,请参见第10.6.2和10.6.3节).

• 内联替换元素
• 正常流程中的块级替换元素
• inline-block 在正常流程中替换元素
• 浮动替换元素
• overflow计算时正常流程中的块级非替换元素visible

有了这样说,绝对定位,不必非替换元素top,height和bottom值auto是一个例外.以下适用于第10.6.4点:

如果没有这三个的top,height以及bottom是auto,如果这两个margin-top和margin-bottom是auto,解决了额外的约束,这两个边缘获得平等的价值观下的方程.

请参阅下面的示例,演示如何使用绝对定位的元素垂直居中margin: auto.它的工作原理,因为没有这三个特性top,height以及bottom具有值auto:

.box {
  border: 1px solid red;
  width: 100px;
  height: 100px;
  position: relative;
}
.center {
  background: blue;
  width: 50px;
  height: 50px;
  margin: auto;
  position: absolute;
  top: 0; right: 0;
  bottom: 0; left: 0;
}

<div class="box">
  <div class="center"></div>
</div>

此外,它可能值得指出以下规则:

如果其中之一margin-top或margin-bottom正在auto解决该值的等式.如果值过度约束,请忽略该值的值bottom并求解该值.

这意味着如果绝对定位的元素具有margin-top值auto和margin-bottom值0(即,margin: auto auto 0),则该元素将绝对位于相对于父元素的底部,如下例所示:

.box {
  border: 1px solid red;
  width: 100px;
  height: 100px;
  position: relative;
}
.center {
  background: blue;
  width: 50px;
  height: 50px;
  margin: auto auto 0;
  position: absolute;
  top: 0; right: 0;
  bottom: 0; left: 0;
}

<div class="box">
  <div class="center"></div>
</div>

Answer 4

为什么不margin:auto垂直工作？

实际上,确实如此 - 只是不是每个display价值.

如果display是flex,margin: auto则垂直和水平居中.

这同样适用于display: inline-flex,display: grid和display: inline-grid.

.box {
  border: 1px solid red;
  width: 100px;
  height: 100px;
  display: flex; /* new */
}
.center {
  background: blue;
  width: 50px;
  height: 50px;
  margin: auto;
}

<div class="box">
  <div class="center"></div>
</div>