CSS to center a div horizontally and vertically

I’m always fond of sites that have absolutely centered content so when I design web sites, I use that style myself. Recently, I’ve been commissioned to design a site and I forgot how to do the centering thingy so I had to google it again.

For reference, I’m putting it here in my blog in case I need to use it again. Here’s the CSS code to center your content horizontally and vertically.

.centered_div {
width:[width]px;
height:[height]px;
position: absolute;
top: 50%;
left: 50%;
margin-left: [width/2]px;
margin-top: [height/2]px;
}

Make sure to change the width and height to the desired number. Then you need to enclose your content into a div with the class centered_div.

<div class=”centered_div”>… </div>

That’s it!