How to center your webpage horizontally and vertically using CSS

If you only want to center your layout horizontally, that is simple: it's just a matter of adding

margin: 0 auto;

to the CSS code for your container or wrapper div.  So if, for example, your layout is enclosed in a div id called "container", the CSS code would be:

#container {
margin: 0 auto;  /* to center the layout horizontally */
width: 950px; /* insert the width of your choice here */
background-color: #ffffff; /* white background */
}

You don't have to use a fixed-width for the container if you don't want to.  A fluid measurement would work fine too, for example 75%, meaning the layout would stretch to 75% of the browser's viewport.

Centering your layout vertically is a bit trickier, but it is possible. This particular method only works for fixed layouts - in other words, you have to know in advance what the height and width of the container div will be. As such, this method isn't suitable for websites where the content is dynamically generated, such as blogs, but it could come in handy for static sites where you know what content will appear on each page.

Firstly, you need to divide the container width by 2 and then add a minus to the front to find out what the measurement for the margin-left needs to be. For example, if your container div is going to be 750 pixels wide, the margin-left will be -375px. You need to do the same thing for the height, to find out what the margin-top should be. So if your container div is 500px high, the margin-top will be -250px. This is what the full CSS code for the container div will look like:

#container {
background-color: #ffffff;
font-family:arial;
width: 750px;
height: 500px;
margin-left: -375px;
margin-top: -250px;
position: absolute;
top: 50%;
left: 50%;
}

It is also possible to do this with fluid measurements instead, if you prefer using percentages instead of pixel measurements. However, you still need to be aware that if your text is too long for the container div, it will spill out over the end of the div; no scrollbar will appear. Therefore, like the fixed layout example above, it should only be used for pages containing static content. Here is the code to do this:

#container {
background-color: #ffffff;
font-family:arial;
width: 50%;
height: 50%;
position: absolute;
top: 25%;
left: 25%;
}

Join Squidoo!
If you would like to create web pages like this one, why not join Squidoo? Click this link to get started!