Centering a div vertically

[markvs]

I would like to center a div vertically within a containing div without having to manually figure the height of the containing div, and then applying the appropriate top margin to the inner div.

 

I know you can't use margin: auto 0;.

 

So, what are my options? Can I do this with javascript?

[MacRankin]

Hi there

 

I've found a couple of possible examples. I'm only marginally interested because I was playing around clearing floats the other day, and the second example looks interesting when wondering if one can merge both ideas. Anyway, about those examples...

 

Vertically and Horizontally Centered Div

 

Cross-browser Vertical & Horizontal Centering

[markvs]

Thanks MacRankin for the info. Helpful, but I think I'm looking for something that doesn't exist.

[Wickham]

You can't make the inner div center vertically unless you give the container div a height to work within unless you use display: table and display: table-cell (unless javascript can do it).

 

See item 17f here

http://www.wickham43.net/firefoxbackground.php

where neither the container #displaytable, nor the middle div #displaytablecell2 nor the green div #nested have a height.

[markvs]

Thanks Wickham - that was very helpful!

Cheers