A lot of people ask me how I center DIV elements in my work. I actually have 2 techniques which works fine and validates at W3.org.
1st is Centering a div through Auto-Margins:
Lets say you placed a div named ‘page’ inside your body tag to serve as a container for your content and you want to place it in the center of the page. Using Margins and having it set automatic horizontally will usually do the trick. (refer to the code below).
#page {
<strong>margin: 30px auto;</strong>
width: 500px;
}Code Explanation : The 1st value in the margin field ‘30px’ sets the length of the margins at the top and bottom of the ‘page’ div to 30 pixels. The second value in the margin field ‘auto’ sets the length of the margins at the left and right side of the ‘page’ div automatically which also centers it because it sets the margins equally for both left and right margins.
2nd is Centering a div through a Negative Margin Method:
Using the same HTML Structure, we can also place the ‘page’ div in the center by using the negative margin method.
#page {
position: absolute;
left: 50%;
width: 500px;
margin-left: -250px;
}Code Explanation : What is obviously done here is that we push the ‘page’ div at half (or 50%) of the screen starting from the left side. And then pull back half of the total width of the div (which is 250px) . That should center the div perfectly.
Though there are tons of ways of centering a div, I choose to stick to these because it leaves the markup clean.
