How to Center a Website With CSS
Centering a website is a key part of many CSS layouts. While there are many ways to do it in a variety of situations, the following is an explanation that is purely CSS, avoids messing with percentages, and is compatible with all modern browsers.
I’ve gotten in the habit of starting by resetting any default margins or padding set the browser. Browsers have default style sheets that are loaded automatically as a foundation for any other CSS. Firefox, for example has a default body margin of 8px. This is a simple way to reset any default values that could interfere with the CSS we are trying to write.
More extensive “reset” stylesheets are available, but for the purpose of this exercise we will only reset the essentials, and keep the code to a minimum.
*{
margin:0;
padding:0;
}
I will be using a main div tag with an ID of “wrapper” for this tutorial. You can set the width to any value your site needs (keep resolutions in mind!) I have picked a width of 960px in favor of a higher resolution average (1024×768). The basic page structure is broken down below:
We are first going to assign a style for the #wrapper div tag that will center it within the browser. This is done using the margin parameter. Remember to specify the width of the #wrapper or the element will not center. After all, it’s hard to center something that takes up 100% of width available. For testing purposes you may want to assign a background color and height to the #wrapper to see the results.
#wrapper{
width:960px;
margin:0 auto;
}
Put simply, Internet Explorer has some issues. When all the other browsers are told to jump, Internet Explorer reinvents the term jump and then hits the deck. One of the joys of web design is compensating for these differences in interpretation. In this case, Internet Explorer 6 will need some special attention center the main div (#wrapper).
In order to compensate for IE6′s shortcomings we have to first set the text alignment to center. This will ensure that the wrapper gets centered on the page.
body{
text-align:center; /*For IE6 Shenanigans*/
}
The body tag encapsulates the wrapper, so the text alignment on it is inherited by the wrapper. Odds are you will want the text to be left-aligned. To do this we will need to update the #wrapper styles to set the alignment back to the left.
#wrapper{
width:960px;
margin:0 auto;
text-align:left;
}
That should do it! This small block of CSS can center any website needed, simply change the sizes. Your complete CSS code should resemble the block below:
*{
margin:0;
padding:0;
}
body{
text-align:center; /*For IE6 Shenanigans*/
}
#wrapper{
width:960px;
margin:0 auto;
text-align:left;
}
