Let’s say I want to vertically center two inline-block siblings of different height: Re #2: I actually am on the same track here as the commenter you just buried for tone. Regardless, that leaves the div html, which indeed does have an explicit height, which is what is powering the vertical centering. The first thing I did when I looked at the pen was delete the HTML table, since that’s not realistic/preferred for most of my use cases, though maybe I am being overly table-phobic there. Re #1: I feel like we’re missing each other on this one. I just think it would be improved if you acknowledged some of the caveats that I think are at the root of the complaint you’re trying to dismiss. Regardless, I still really like the idea of this –it’s sorely needed. I think pos: absolute is a major caveat when laying things out, since it can have the unintended consequence of having elements layer over one another.Ĥ) Also, in that same pen, the element fails to stay vertically centered if it has a sibling that stretches the vertical height of the parent.

If I don’t know the height of the child, it’s quite common for me to also not know the height of the parent.ģ) In your “both hor & vert example” where the height is unknown, it’s a little weird to have the child be pos: absolute and imply that this is no big deal. To me, that defeats the purpose of trying to handle the unknown-height scenario. However, I think you’re missing the spirit behind the classic “centering is hard” complaint in a couple of places, which, at least for me, always comes back to not knowing the height of the elements.ġ) Your display: table-cell fix relies on knowing the height of the child element.Ģ) In your “is it block level” -> “is the element of unknown height” you proceed to give the parent an explicit height. Good idea! I like the concept of this article and also the show/hide structure.

Centering text vertically in a div