Почему "позиция: абсолютная, левая: 0, справа: 0, ширина: XYpx, margin: 0 auto" на самом деле центр?

Я очень разбираюсь в 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>

Ответы

Ответ 1

Это объясняется в разделе 10.3.7 спецификации CSS2.1:

Ограничение, определяющее используемые значения для этих элементов:

'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = ширина содержащего блока

Если ни один из трех не является "авто": если оба "margin-left" и "margin-right" являются "auto", разрешите уравнение под дополнительным ограничением, чтобы два поля получили равные значения [...]

Как вы можете видеть, автоматические поля с обеих сторон ведут себя одинаково для абсолютно позиционированных элементов, как и для незарасположенных элементов уровня блока, при условии, что смещения left и right, а также width, не авто.

Интересно, что только для абсолютно позиционированных элементов это относится к top, height и bottom, а также, что по существу означает, что это возможно чтобы вертикально центрировать абсолютно позиционированный элемент, используя автоматические поля. Опять же, это предусмотрено, что три свойства выше не являются авто, и соответствующие поля автоматически. (В вашем случае это означает margin: auto, а не margin: 0 auto, поскольку последний обнуляет вертикальные поля.)

Ответ 2

Левое и правое (и верхнее и нижнее) свойства не определяют ширину как таковую, а скорее смещение относительных полей с соответствующей стороны родителей.

В отсутствии определенной ширины и смещениях, объявленных как ноль, ширина вычисляется на основе смещений.

Предоставление блоку ширины или высоты препятствует тому, чтобы блок занимал все свободное пространство и заставлял браузер вычислять маржу: auto на основе новой ограничивающей рамки

MDN - на "Верх"... и то же самое относится к другим свойствам.

Для абсолютно позиционированных элементов (с положением: абсолютное или фиксированное положение), оно определяет расстояние между краем верхнего края элемента и верхним краем его содержащего блока.

Статья с Smashing Magazine с более подробной информацией

Благодаря j08691 для ссылки