Hacker News new | ask | show | jobs
by powrtoch 4489 days ago
Can anyone explain the bit about 1x1.gif being the only way, to this day, to vertically center elements? AFAIK there's still no way to vertically center a dynamic height element without javascript, so if invisible gifs can do it I'd at least like to know how.
9 comments

A little mix of display:table and display:table-cell and vertical-align:middle will get you there without any JS. For example http://css-tricks.com/centering-in-the-unknown/
I don't know about spacer gifs, but you can use tables. Or fake tables using CSS. JavaScript definitely isn't required, even to vertically center things in IE6.
This even works in IE8: http://jsfiddle.net/QVQLN/

jsfiddle itself doesn't work in IE8, so hier is a direct link: http://fiddle.jshell.net/QVQLN/show/

You can use CSS flexbox too :)
It was used more to stretch table cells to achieve pixel perfect layouts.
I don't know that it works in every use case, but I usually use a container with equal left and right margins.
powrtoch was talking about vertically centering.
It's pseudo-centered, not really centered, and can't center a dynamic element.