Fixed-height Container/variable-height Content Vertical Alignment Using CSS
Whew. The title is a bit long-winded eh?
This short blog post highlights how to vertically center variable-height block-level content inside a fixed height container, in a cross-browser, (mostly) standards compliant manner.
I’ve lost count of how many times I’ve needed to do this. Seriously. For example, you may have a block of text, or an image or two that need to sit nicely in a container you’ve allocated for it. For quite a while now, all standards-compliant browsers have had support for the display: table CSS declaration, which makes vertical alignment a snap. Unfortunately though, Internet Explorer is way behind in the game, with both IE6+7 not supporting this declaration. There is hope however!
I have stumbled across the following page a few times now, it’s the best resource I’ve found on how to overcome this problem.
I’ve adapted this solution into a set of 2 CSS files that I now use when I need to vertically center something.
1 2 3 4 5 6 7 8 9
1 2 3 4 5 6 7 8 9 10 11 12 13
Include it in the page like so:
1 2 3 4
To use this solution, let’s say you currently had markup like so:
1 2 3 4 5
You would change it to the following:
1 2 3 4 5 6 7
That’s all, folks!