What is the cleanest way to center a div absolutely (H+V) inside a browser window?

Question

I need to build a webpage of just a humble content (a logo and some text) to be show in the center of a browser window. How do I best achieve this effect targeting today web browsers?

Answer 1

If you know the dimensions of the element (do the math for the values):

position: absolute;
left: 50%;
top: 50%;
width: ($WIDTH)px;
height: ($HEIGHT)px;
margin: (-$HEIGHT/2)px 0 0 (-$WIDTH/2)px;

What it does it positions the top left corner of the element at the center of the viewport and then uses negative margins to inch the center point to the center of the viewport.

Answer 2

Here's a very simple solution. I take no credit for this:

http://www.infinitywebdesign.com/research/cssverticalcentereddiv.htm

Works very well for a simple body > div situation like yours.

Your other option, although I fear the repercussions from some table-haters around here, is you could wrap the div in a table, and using the vertical-align:middle property on it to take care of the vertical align without javascript. Then use margin: 0 auto; on the div to handle the horizontal center.

Answer 3

you can put your content inside a div and provide height & width to this div then apply this simple css like u applied width as 300px & height as 300px::

div {
position: absolute;
top: 50%;
left: 50%;
margin: -150px 0 0 -150px;
}

then it'll always be in center and make sure u used a valid DOCTYPE.