CSS метафизика: ПОЧЕМУ вертикальное выравнивание страницы так сложно?
Относительно страницы горизонтальное выравнивание в CSS легко - a margin:0 auto доставит вас большую часть времени и text-align:center для некоторых других случаев.
Мой вопрос к гуру не в том, как вертикально выровнять, но почему это намного сложнее? Почему нет margin:auto 0? Я имею в виду, с точки зрения программирования.
Теоретически, похоже, что одни и те же алгоритмы применимы к обоим типам центрирования.
Ответы
Ответ 1
Хороший вопрос, и я не знаю, но я бы заподозрил, что корень проблемы будет заключаться в HTML, и поэтому он отображает двигатели, первоначально предназначенные для семантики документа, в отличие от семантики макета/печати. CSS исключительно хорош в описании абзацев, заголовков и всех видов проблем с документами и очень слаб, когда речь идет о больших задачах макета DTP, которые все теперь хотят, чтобы их веб-сайты были.
В двух словах: я думаю, проблема в том, что HTML задается для вещей, для которых он не предназначался. Квелл неожиданно.
Ответ 2
Концептуально правила CSS применяются к элементам документа в том порядке, в котором они отображаются в HTML, т.е. в предзакатном обходе дерева DOM. Исторически сложилось так, что CSS можно было применять при загрузке документа, но даже с динамическим HTML и динамическим CSS существуют преимущества производительности, позволяющие применять CSS за один проход.
Вот почему CSS не имеет селекторов для "A, за которым следует B" или "A, который содержит B", тогда как можно сказать "A, предшествующее B" или "A, содержащееся внутри B", потому что в последних случаях A предшествует B в обходном порядке.
Вертикальное центрирование затруднено, потому что в то время, когда обрабатывается CSS для дочернего элемента (элемент, который будет центрирован), высоты родительского и дочернего элементов (два значения, необходимые для вычисления верхнего смещения дочернего элемента) не известны, поскольку оба они зависят от элементов, которые еще не обработаны.
Зависимость от высоты родительского элемента преодолевается абсолютным позиционированием: top: 50%. Это эффективно отменяет расчет вертикального смещения до тех пор, пока не будет известна высота родительского элемента.
Аналогично, CSS3-преобразования могут учитывать высоту дочернего элемента: transform: translateY(-50%). До CSS3 было принято использовать отрицательный margin-top вместо этого, но это требовало установки фиксированной высоты для дочернего элемента.
