Center a DIV Container with CSS

April 5, 2006

Center your content horizontally and vertically!

First, put your content inside a <DIV> container.

<DIV class=”container”>
All My Content Goes Here
</DIV>

Then, establish the style properties for the container.

<STYLE>
div.container {
   position: absolute;  /* goes hand-in-hand with top and left parameters to position with the BODY tag */
   left: 50%; /* relative to the BODY tag */
   width: 600px; /* specific container width */
   margin-left: -300px; /* works with left parameter to center the container horizontally */
   top: 50%; /* relative to the BODY tag */
   height: 380px; /* specific container height */
   margin-top: -190px; /* works with top parameter to center the container vertically */
   text-align: left; /* I want the DIV content to be flush left */
   overflow: visible; /* in case the container is not the exact size of the content block */
}
</STYLE>

Here’s my test sample. View the source code to see how it works.

More information about CSS properties can be found in the MSDN Developer Center.