How to center a DIV in HTML


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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


Follow

Get every new post delivered to your Inbox.

%d bloggers like this: