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