Centering a div on the screen with absolute position is something may at first seem very complicated, but with a little thinking and simple addition to the position element you can easily center an absolute position div in the middle of the screen.
This can be helpful for creating a wrapper to contain and center the contents of your entire site on the page.
Lets say that you have a simple page like this:
<div id="xyz_main">
<div id="xyz_header"> Header </div>
<div id="xyz_body"> Body </div>
<div id="xyz_footer"> Footer </div>
</div>
And you wish to center the ‘main’ div in the center of the page as an absolute position center div. You can do this by adding the following positional style attributes to the ‘main’ div:
#xyz_main {
width: 140px;
border: 1px solid #666666;
text-align: left;
position: absolute;
top: 0px;
left: 50%;
margin-left: -70px;
}
By setting the left position to 50% it will set the div to start in the center of the screen. By adjusting the left margin by a value half of the size of the div we are centering, we can move the entire div to the left and place it directly in the center of the page.
Your page would now look something like this:
That’s it! That is all you have to do to center an absolute position div on the page… Enjoy!
NOTE: I have added a new CSS Template Cheats section to the site. This new resource has even more compliant methods of centering DIVs.
