CSS metaphysics: WHY is page vertical alignment so difficult?

Question

Relative to the page, horizontal alignment in CSS is easy - a margin:0 auto gets you by much of the time, and a text-align:center for some other cases.

My question to the gurus is not how to vertically align, but why is it so much more difficult? Why isn't there margin:auto 0? I mean, from a programming perspective.

Theoretically, it seems like the same algorithms would apply to both types of centering.

Answer 1

Good question and I don't know, but I would suspect the root of the problem is going to lie in HTML and therefore it's rendering engines being originally intended for document semantics as opposed to layout/printing semantics. CSS is exceptionally good at describing paragraphs, headings, and all kinds of document concerns and really weak when it comes to the larger DTP layout tasks which everyone now wants their websites to be.

In a nutshell: I think the problem is that HTML is being tasked for things it was not intended for. Quel surprise.

Answer 2

Conceptually, CSS rules are applied to the elements of a document in the order they appear in the HTML, i.e., in a pre-order traversal of the DOM tree. Historically, this was so that the CSS could be applied as the document was being loaded, but even with dynamic HTML and dynamic CSS, there are performance advantages to being able to apply the CSS in a single pass.

This is why CSS has no selectors for "an A followed by a B" or "an A which contains a B", whereas it's possible to say "an A preceded by a B" or "an A contained inside a B", because in the latter cases, A precedes B in a pre-order traversal.

Vertical centering is difficult because at the time the CSS for the child element (the element to be centered) is processed, the heights of the parent and child elements (the two values required to compute the top offset of the child element) are not known, as they both depend on elements which have not yet been processed.

The dependence on the height of the parent element is overcome by absolute positioning: top: 50%. This effectively defers calculation of the vertical offset until after the height of the parent element is known.

Similarly, CSS3 transforms can account for the height of the child: transform: translateY(-50%). Prior to CSS3, it was common to use negative margin-top instead, but that required setting a fixed height on the child element.