Привет.
Почему блок по середине выравнивается при абсолютном позиционировании?
Я не понимаю логику происходящего.
У меня есть блок. задаю ему position:absolute.
Свойство direction:ltr (слева направо) по умолчанию, поэтому блок смещается относительно левой стороны хтмл-элемента на 0 пикселей, потом задается ширина 300 пикселей, а right:0 просто игнорируется - так разрешается КОНФЛИКТ задания left:0px, right:0px и width:300px. С вертикалью аналогично, только по умолчанию приоритет задания - сверху вниз.
Получаю, что левый верхний угол фиолетового блока стоит в точке (0,0) пикселей у хтмл-элемента.
Теперь насчет margin:auto. Почему выравнивается по середине по высоте - не понимаю. В стандарте https://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align написано 10.6.2 Inline replaced elements, block-level replaced elements in normal flow, 'inline-block' replaced elements in normal flow and floating replaced elements If 'margin-top', or 'margin-bottom' are 'auto', their used value is 0.
То есть, марджины сверху и снизу становятся нулями при задании авто.
Только что нашел в стандарте CSS про задание вертикальных margin для абсолютно позиционированных элементов. Если элемент в нормальном потоке или плавает, то установленные в авто вертикальные margin обнуляются (10.6.2). Если же элемент позиционирован абсолютно, а у элемента заданы вертикальные margin в авто, то обнуления НЕ происходит - эти margin делаются равными друг другу (10.6.4.)
Пункт 10.6.4. Абсолютно позиционированные, незаменяемые элементы. стандарта CSS - 4. Если в этой точке оба 'margin-top' и 'margin-bottom' – все еще 'auto', то решите уравнение при жестком условии, что два поля должны быть РАВНЫ.