Question

我对CSS非常熟练，但今天我偶然发现了一个令我头疼的片段（here和here）。

我从未想过可以通过margin: 0 auto将绝对定位的元素居中，但如果有问题的元素有一个设置的宽度，并且有left: 0和right: 0，它实际上似乎有效：

#parent
{
    background: #999;
    height: 300px;
    position: relative;
    width: 300px;
}

#child
{
    background: #333;
    height: 50px;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    width: 50px;
}

<div id="parent">
    <div id="child"></div>
</div>

（JSFiddle）

我一直认为left: 0和right: 0将决定元素的宽度（它是第一个相对定位的父级的100％），但似乎width优先于此，因此{{1}工作。

这是定义的行为吗？我可以在任何规格中找到它的相关信息吗？我用Google搜索了一下，但没有任何用处。

Answer 1

这在CSS2.1规范的section 10.3.7中进行了说明：

确定这些元素的使用值的约束是：


＆＃39;左＆＃39; +＆＃39; margin-left＆＃39; +＆＃39; border-left-width＆＃39; +＆＃39; padding-left＆＃39; +＆＃39;宽度＆＃39; +＆＃39; padding-right＆＃39; +＆＃39; border-right-width＆＃39; +＆＃39; margin-right＆＃39; +＆＃39;对＆＃39; =包含块的宽度


如果三者中没有一个是＆＃39; auto＆＃39;：如果两者都是＆＃39;自我保留＆＃39;和＆＃39; margin-right＆＃39;是＆＃39; auto＆＃39;，在额外约束条件下解决方程，即两个边距得到相等的值 [...]

正如您所看到的，如果left和right偏移量为width和margin: auto偏移，则两侧的自动边距对于绝对定位的元素的行为与对非定位的块级元素的行为相同以及margin: 0 auto，不是自动的。

有趣的是，只有绝对定位的元素this applies to top, height and bottom as well，这实际上意味着可以使用自动边距垂直居中一个绝对定位的元素。同样，前提是上述三个属性不是自动的，并且相应的边距是自动的。（在您的情况下，这意味着{{1}}而不是{{1}}，因为后者将垂直边距归零。）

Answer 2

左右（以及顶部和底部）属性不定义宽度本身，而是相对边距与父母各边的偏移。

在定义宽度的缺席且声明为零的偏移量中，宽度根据偏移量计算。

为块提供宽度或高度可防止块占用所有可用空间并强制浏览器计算margin：auto基于新的边界框

MDN - 在“Top”上......同样适用于其他属性。

对于绝对定位的元素（位置：绝对或位置：固定的元素），它指定元素的上边距边缘与其包含块的上边缘之间的距离。

Smashing Magazine Article with more detail

感谢j08691的链接

为什么＆＃34;位置：绝对;左：0;右：0;宽度：XYpx;保证金：0自动＆＃34;实际上居中？

2 个答案: