html - 为什么 "position: absolute; left: 0; right: 0; width: XYpx; margin: 0 auto"实际上居中？

Question

我在 CSS 方面非常精通，但今天我偶然发现了一个让我头疼的片段(here 和 here)。

我从没想过可以通过 margin: 0 auto 将绝对定位的元素居中，但考虑到所讨论的元素具有设置的宽度并且有 left: 0 和 对: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 在这里优先，因此使 margin: 0 auto 起作用。

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

Answer 1

这在 section 10.3.7 中说明了CSS2.1 规范:

The constraint that determines the used values for these elements is:

'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block

如果三个都不是'auto':如果'margin-left'和'margin-right'都是'auto'，在两个边距取相等值的额外约束下求解方程[。 ..]

如您所见，如果 left 和 right 偏移量以及 width 不是自动的。

有趣的是，仅适用于绝对定位的元素，this applies to top, height and bottom as well ，这实质上意味着可以使用自动边距使绝对定位的元素垂直居中。同样，前提是上面的三个属性不是自动的，并且各自的边距是自动的。 (在您的情况下，这意味着 margin: auto 而不是 margin: 0 auto 因为后者将垂直边距归零。)