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

Question

我在CSS方面非常精通,但今天我偶然发现了一个令我头疼的片段(这里和这里).

我从来不认为我们可以通过中心绝对定位的元素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这里的优先级,因此使得margin: 0 auto工作.

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

Answer 1

这在CSS2.1规范的第10.3.7节中说明:

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

'left'+'margin-left'+'border-left-width'+'padding-left'+'width'+'padding-right'+'border-right-width'+'margin-right'+'right '=包含块的宽度

如果这三个都不是'auto':如果'margin-left'和'margin-right'都是'auto',那么在额外约束条件下解决方程式,即两个边距得到相等的值[...]

如您所见,两侧的自动边距对于绝对定位的元素的行为与对于非定位的块级元素的行为相同,前提是它们left和right偏移量以及width不是自动的.

有趣的是,仅对于绝对定位的元素,这适用于top,height和bottom以及,这本质上意味着有可能使用自动边缘垂直居中的绝对定位的元件.同样,前提是上述三个属性不是自动的,并且相应的边距是自动的.(在你的情况下,这意味着margin: auto而不是margin: 0 auto后者将垂直边距归零.)

Answer 2

左侧和右侧(以及顶部和底部)属性不定义宽度本身,而是定义相对边距与父项相应边的偏移量.

如果没有定义宽度并且偏移量声明为零,则根据偏移量计算宽度.

赋予块宽度或高度可防止块占用所有可用空间并强制浏览器计算余量:基于新边界框自动

MDN - 在"顶部"......同样适用于其他属性.

对于绝对定位的元素(位置:绝对或位置:固定的元素),它指定元素的上边缘边缘与其包含块的上边缘之间的距离.

粉碎杂志文章更详细

感谢j08691的链接