How to center a div vertically?

Question

I have a div that I want to center horizontally and vertically.

For the horizontal issue everything is great, but I have a problem with the vertical ali

Answer 1

First off, treating non-table markup as tables (with display:table and friends) isn't cross-browser. I don't know which browsers you need to support but certainly IE6 won't do this. But, if your targeted browser do all support display:table I can give you some tips.

The vertical centering approach you're looking for (using table layout) depends on having a TD with vertical-align:middle, then inside of that a single block element will vertically center. So I think what you want is:

#parent { display:table-cell; vertical-align:middle; }
#child { /* nothing necessary, assuming it's a DIV it's already display:block */ }

It's ok to use table-cell with no surrounding table-row and table, the browser infers the needed table wrapping elements for you.