2

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

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

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

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

也适用于块元素：

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

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

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

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

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

4

1 回答 1

1

如上所述：

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

因此，如果一个元素相对于父元素绝对定位，同时使用topand 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 类=外部>
    <div class=inner>文本</div>
</div>
于 2013-10-18T00:26:13.237 回答