Horiz & Vert center DIV in the middle of the screen?

I’m trying to make a page where I have a fixed height header and footer. I want the header at the top, the footer at the bottom, and a content box (div) to be centered vertically and horizontally in the gap between the header and footer. If the content is taller than that gap, it would push the footer down. I’ve made a jsfiddle with the code as I’ve got it so far, but it only works if the content is shorter than the gap, and it doesn’t work at all in Internet Explorer (surprised?).

Where I’m at so far: http://jsfiddle.net/VrfAU/4/

If that wasn’t very clear, hopefully these images make it obvious what I am trying to do.

Small content:

Large content:


You’ll need the basic routine from my sticky footer method here. Then it will need modifying to do what you want and I think [URL=“http://www.pmob.co.uk/temp/sticky-footer-vertical-center.htm”]something like this should work from IE6+ (with any luck).

I’ve only knocked that up quickly so will need testing to see if it stands up to scrutiny:)

Thanks, that gets really close, but on Webkit browsers the footer sits just below the bottom of the screen.

Edit: I’ve updated my jsfiddle with what you came up with, including a few small fixes; however, I still haven’t figured out the issue with the footer being below the bottom of the window on webkit browsers. http://jsfiddle.net/UYpnC/4/

Ok that was due to the old opera fix which I’ve removed now and is working in Chrome and Safari. Newer versions of Opera should work without the previous fix.

I’ve updated the example so refresh.

Amazing! Don’t even want to think about how much time I spent trying to figure this out, you are a life saver. Thanks!