Centering Your Web Site With CSS

by Eileen Mullin — Apr 16, 2007

Using CSS to center elements on a Web site -- whether it's the entire page or a single block or tag -- can be a little tricky at first, especially if you've only used tables to center elements before. In the long run, though, you'll find it a huge timesaver to not have to keep track of so many tables embedded within tables. Below, we'll look at the markup for centering your Web site while tweaking the CSS to ensure that older browsers will recognize the centering effect you want.

A popular and straightforward way to center an entire Web site page is to create a container <div>, then provide the element's width. One standard width is 760px, which ensures your page's width will display fully on even small computer screens with a 800 x 600 pixel resolution. Next, you need to specify automatic left and right margins, and then place the rest of your HTML and content within the opening and closing <div> tags. This single container will center the rest of your content perfectly within it.

Some older browsers -- specifically, Internet Explorer before version 6 -- need some extra workarounds in the CSS to make this work. The <body> tag should include a center alignment for the text (or "text-align: center" in the CSS). However, the container <div> will need its own text-align parameter to realign the text back to the left.

Here's how this might look in your CSS. I've used "container" as the name for the container <div>, but you can use any label that makes sense for you:

 <style>
#container {
margin-left: auto;
margin-right: auto;
width: 760px;
text-align: left;
}
body {
margin: 0 0 20px 0;
text-align: center;
}
</style>

In the CSS for the tag above, I combined what could have been written as four separate margin attributes into a single line. This margin attribute lists examples of settings for, respectively, the margin-top, margin-right, margin-bottom, and margin-left properties.

Let me also note that that elements with "auto" settings don't really play well with styles that use fixed positioning -- which shows up as "position: fixed;" or "position: absolute;". To avoid problems in this area, you have to also give the container <div> its own positioning. If you use "position: relative;", then the container <div> can retain its ability to center within automatic margins. Here's how this would look in your CSS styles document; "position: relative;" is the only addition to the previous code:

 <style>
#container {
position: relative;
margin-left: auto;
margin-right: auto;
width: 760px;
text-align: left;
}
</style>

If you want to center a block of text vertically on your page, you need several CSS declarations that account for the window's height:

 <style>
body, html {height: 100%;}
#vertcontainer {height: 100%; overflow: visible;}
...
</style>

In this example, you set both the body and html tags to use 100% of the window's height as a basis for structuring the page and its enclosed content. You allow the overflow to display (in "overflow: visible") so that a scrollbar can appear if the content extends past the window.

Del.icio.us Digg Technorati Blinklist Furl reddit Design Float