CSS метафизика: ПОЧЕМУ вертикальное выравнивание страницы настолько сложно?

Question

Относительно страницы, выравнивание по горизонтали в CSS легко - margin:0 auto доставит вас в большинстве случаев и text-align:center для некоторых других случаев.

Мой вопрос к гуру не в том, как вертикально выровнять, но почему это намного сложнее? Почему нет margin:auto 0? Я имею в виду, с точки зрения программирования.

Теоретически, похоже, что одни и те же алгоритмы применимы к обоим типам центрирования.

Answer 1

Хороший вопрос, и я не знаю, но я бы заподозрил, что корень проблемы будет заключаться в HTML и, следовательно, это исходные механизмы рендеринга, предназначенные для семантики документа, в отличие от семантики макета/печати. CSS исключительно хорош в описании абзацев, заголовков и всех видов проблем с документами и действительно слаб, когда речь идет о больших задачах компоновки DTP, которые все теперь хотят, чтобы их веб-сайты были.

В двух словах: Я думаю, проблема заключается в том, что HTML задается для вещей, для которых он не предназначен. Кельн удивляет.

Answer 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, но для этого требуется установить фиксированную высоту для дочернего элемента.