Hacker News Reader

Comment by thekillingjoke | Hacker News Reader

I think OP's point was that the trick to vertical centering involves wrapping a div as a table cell and then vertically aligning that. It should be much simpler, like 'text-align:center'

View on HN

Use margin: auto and absolute positioning to center something vertically. No tables or special magic needed.

I think "margin: auto" maybe should have been written "margin: center" to make it more obvious, but the feature is there.

Absolute centering only works when the element you are trying to center has a defined height. If you are trying to center an element with unknown height inside a container with unknown height, the table-cell is likely the front-runner, sadly.

I like the translateY(-50%) trick. But yeah, it is a pain point. Hence flexbox.

People always suggest margin auto but at least for me having defined heights for elements is the very rare exception.

Why would you want to do that? That sounds absolutely horrific.

Just center the div in absolute mode. You need to have it wrapped in something though, to have something to center against, but you shouldn't have tables in there unless you want them.

The point remains that centering vertically with absolute positioning does not work with an element of variable height. Meanwhile, horizontally centering something of variable width is dead simple. Why the difference? It's a shortcoming of CSS.

There is a fundamental reason for the difference: in standard CSS block/inline layout, widths depend on parent widths, but heights depend on child heights. Far from being stupid, this difference is the entire reason CSS is parallelizable at all.

Flexbox makes this simpler by switching to an entirely different model, which is the right approach for UIs (as opposed to documents). But I can't really fault CSS 2.1 for not introducing flexbox right away, because CSS 2.1 is complex enough as it is.

Are UIs and documents so different?

Reply on news.ycombinator.com