margin-top: auto 和 margin-bottom: auto 等于 0 保证金的原因是什么？答案

【问题标题】：What is the rationale behind margin-top: auto and margin-bottom: auto amounting to 0 margin?margin-top: auto 和 margin-bottom: auto 等于 0 保证金的原因是什么？
【发布时间】：2016-04-04 06:05:30
【问题描述】：

由于margin-right: auto 和margin-left: auto 将元素水平居中，我希望它们的垂直对应物以相同的方式表现。

但我知道这不会发生，根据 CSS 规范：

10.6.2 内联替换元素、正常流程中的块级替换元素、正常流程中的“inline-block”替换元素和浮动替换元素

如果 'margin-top' 或 'margin-bottom' 为 'auto'，则它们的使用值为 0。

同样适用于块元素：

10.6.3 当“溢出”计算为“可见”时，正常流中的块级非替换元素

当“溢出”不计算为“可见”但已传播到视口时，本节也适用于正常流中的块级非替换元素。

如果 'margin-top' 或 'margin-bottom' 为 'auto'，则它们的使用值为 0。

现在我想知道的是，这个决定/行为背后的基本原理。

我正在寻找的是理解和信念。我不认为一个模糊的解释会做到这一点，但欢迎任何贡献。

【问题讨论】：

与stackoverflow.com/questions/6775273/… 类似，但该问题似乎与规范为何如此规定无关。
我认为这在很大程度上与折叠边距有关；你不可能有一个非零值而不导致边距以不可预知的方式崩溃。
请注意，在一些模糊的情况下，margin-top:auto 和 margin-bottom:auto 确实解析为非零等距垂直边距。见jsfiddle.net/aVbyK。可悲的是，这些案例太晦涩难懂，没有太多用处。此外，就垂直边距而言，与 margin-left:auto 和 margin-right:auto 等距水平边距相当的行为，你引用了错误的规范。当“溢出”计算为“可见”时，它应该是第 10.6.3 节正常流中的块级非替换元素，而不是 10.6.2。但是，无法真正阐明其基本原理。
啊哈...这不是那么晦涩难懂！我可以看到它很有用。感谢您在 jsfiddle 上提供的示例。因此，如果一个元素相对于父元素绝对定位，使用 both 顶部和底部，但它的高度已定义并且小于父元素的高度减去顶部和底部偏移量，那么 margin 属性将用于确定它相对于父元素的垂直对齐方式，而 margin:auto 将产生一个垂直居中的元素。没错，这听起来很复杂，但在 jsfiddle 上很清楚。再次感谢！
因为 wc3 是一维的，高度是事后想到的。

标签： css margin vertical-alignment w3c

【解决方案1】：

如上所述：

啊哈...这不是那么晦涩难懂！我可以看到它很有用。感谢您在 jsfiddle 上提供的示例。

因此，如果一个元素相对于父元素绝对定位，同时使用top 和bottom，但它的height 已定义并且小于父元素的高度减去top和bottom 偏移，然后margin 属性将用于确定它相对于父元素的垂直对齐方式，margin:auto 将导致垂直居中的元素。

的确，这听起来很复杂，但在jsfiddle 上很清楚。

例如，这个 CSS：

.inner { 
  position:absolute; 
  top:0; bottom: 20px; left:0; right:0px;
  padding:0; border:0;
  margin:auto;
  height:20px; width:50px;
}

还有这个 HTML：

文字

【讨论】：