Perfectly Centered Div

So this post is for all of you that need to center a div in the middle of the page. This can be a some what hard task if you really care about how your design works. You can use an absolute div and just set left and right percentages but its hard to say that it will render out the same in everyones browser. This is due to the screen size, everyones screen is different sizes and so there browser windows are different sizes. So we need to make sure that our div is centered horizontally for everyone that views our page.
In order to do this we need two div’s, well there are many different ways of doing this but the technique I’m going to show you uses two div’s. The first div is our frame, this div stretches all the way from the left side to the right side of our browser window. Then we add a div inside our frame that has auto margins making it perfectly centered.

Okay lets get started with our CSS:

.windowFrame {
position: absolute;
top: 100px; /* Space between the top of the browser and the div */
left: 0px;
right: 0px;
}
.window {
width: 800px; /* Whatever width size you need. */
height: 532px; /* Whatever height size you need. */
background: url('backing.png') repeat; /* Background image of our window */
padding:10px;
border: #888888 1px solid;
margin: 0 auto; /* This is what centers the div. */
z-index: 9; /* Just incase your have other content */
}

And now the HTML:

<div class="windowFrame"><!-- Our main frame -->
<div class="window" id="window"><img src="images/1_full.jpg" /></div>
<!--Div above is our actual window with our content-->
</div>

Thanks it, thats how easy it is. I have setup a demo here (View Demo) so you can check it out and play around with it. If you find any bugs or issues with this let me know.
Happy Designing