It’s has been very popular to center your web page. This may change in the future to something not thought of as yet; but, you are probably looking at this post because you want your web page centgered.
Reset the Browser Style Sheet
First, browsers set their own margins, padding, text ,etc. using their default CSS page. There is lots of information on the web regarding this. For now, let’s reset the margins and padding to “0″.
*{
margin: 0;
padding: 0;
}
The asterisk indicates this is a universal style and tells the browsers to set this for all elements on the page. We reset the margin and padding in order to keep the various browsers from using their own default settings and giving us fits when trying to establish our own padding and margin. There are lots of “reset” type style sheets available on the web. You might want to check them out.
Create a Wrapper
You will need a wrapper in which all the elements of your page will reside. It is where we control the centering of your web page and its contents.
#wrapper {
width: 960px;
margin: 0 auto;
}
You determine the overall width of your web page. The margin: 0 auto: sets the top and bottom margins to 0 and the side margins to auto which centers the page.
Add an Explorer Hack
We need to add an align center to the body of your web page. This fixes a fault in some Explorer pages.
body {
text-align:center; /*For IE6 Shenanigans*/
}
Reset Text Alignment
Since we’ve added this align center to the body tag, we need to correct it or all text on your web page will be centered unless explicity changed with CSS. So, we add the following to our #wrapper div CSS.
#wrapper {
width: 960px;
margin: 0 auto;
text-align: left;
}
All the Code
You should end up with the following code:
*{
margin:0;
padding:0;
}
body{
text-align:center; /*For IE6 Shenanigans*
}
#wrapper{
width:960px;
margin:0 auto;
text-align:left
}
