n o t e 1 9 . c o m

To center a DIV on a page (or another DIV), you’ll need to know the width & height of the DIV that you want to center. First, you’ll set the top left corner of the DIV to be 50% of top and left, and then you’ll need to use the tags margin-top and margin-left and thus shift the DIV half of the height up and half of the width to the left, (hence the negative number). For example, below is a definition of a DIV that will be centered on the page (the style attributes are broken into separate lines for illustrative purposes). Click here to see this DIV.

<div style="position: absolute;
                   top:50%;
                   left: 50%;
                   margin-top: -200px;
                   margin-left: -324px;
                   background:red;
                   width:647px;
                   height:400px;">
</div>

And here is an example of a DIV centered in another DIV.

This entry was posted on February 16, 2007 at 2:06 am and is filed under Programming. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.