CSS: Center a Div Using Absolute Positioning
Aligning divs to the center of the page is relatively easy. It’s just a matter defining its width and setting the left and right margins to “auto”. Easy does it. But what happens when your div is using absolute positioning? It won’t matter if your left and right margins are set to “auto”. I have found a simple solution that works like a charm!
HTML structure:
<div id="main">
<div id="header"> Header </div>
<div id="content"> Body </div>
<div id="footer"> Footer </div>
</div>
CSS: Positioning the “main” div:
#main {
width: 960px;
background: #f1f1f1;
color: #000;
text-align: left;
position: absolute;
top: 0px;
left: 50%;
margin-left: -480px;
}
The left position is set to 50% so that the div will begin at the center of the screen. The left margin value is -half of the size of the div we are centering. This pushes the div over to the left directly to the exact center of the page.
