由于margin-right: auto
和margin-left: auto
中心的元素水平,我希望他们的垂直同行以同样的方式行事。
然而,我明白,这不会发生,因为每个CSS规范:
10.6.2内联替换元素,块级代替在正常流动的元件,“内联块”替换在正常流动元件和浮置替换元素
如果“边距”或“边距”是“自动”,其使用值是0。
也适用于块的元素:
10.6.3块级“溢出”时在正常流动的非替换元素计算为“可见”
这部分也适用“溢出”不计算到“可见的”当但已被传播到视块级非替换元件在正常流动。
如果“边距”或“边距”是“自动”,其使用值是0。
现在我想知道,这背后是决策/行为的理由。
我正在寻找的理解和信念。 我不认为一个含糊的解释会做到这一点,还没有任何贡献是值得欢迎的。
如上文所述:
啊哈......这不是那么晦涩难懂! 我可以看到它是有用的。 感谢您的例子,你给上的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:
<div class=outer>
<div class=inner>Text</div>
</div>
文章来源: What is the rationale behind margin-top: auto and margin-bottom: auto amounting to 0 margin?