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;
}
Discussion
December 6th, 2008 at 12:17 PM
Very simple and easy :). Straight forward and to the point tutorial that is easy to follow and has a touch of originality. I like it, bookmarked.
January 18th, 2009 at 11:37 PM
There’s a better method, but what you have is great as well. Instead of using text-align:center; which will center all elements in the body tag, use margin-left:auto; and margin-right:auto; . Using text-align:center will center all text and makes you override it in each div, or the main div, like you did in the #wrapper. You won’t need to using the margin-left and margin-right.
But thanks for taking the time to submit a great tutorial for those who don’t know CSS very well, :).
January 22nd, 2009 at 9:46 AM
@Matt – Isn’t “margin:0 auto;” the same thing as “margin-left:auto; and margin-right:auto;” ?
February 1st, 2009 at 8:54 PM
Yeah, ^_^. It’s just a coding preference, I don’t like combining much of the rules ’cause I feel that individual rules for each side gives more control, for instance, with differing colored borders on each side to give a 3d-ish appearance (although I don’t, it’s just an example). Sorry for a late response, been a bit busy at work creatin’ a customer service course.
February 1st, 2009 at 8:57 PM
Lol, mixed two different posts with a copy/paste, sorry. Scrap that borders part. I”ve heard some people have problems in IE using margin:0 auto;, so I also do it just to avoid any potential issues in that department in case they ever did arise, for whatever reason. But yes, it’s the same.
February 19th, 2009 at 10:44 AM
Thank you so much!!! I’ve been trying to do this for about 2 weeks with no results. Every other instruction I managed to find didn’t work. But with your help here I finally was able to fix my problem. Very simple.. thanks :)
April 13th, 2009 at 4:33 PM
Rather than using text-align:center; use the following
#wrapper{
width:960px;
margin:0 auto 0 auto;
}
Now you do not have to use the text-align:center; on the body to make it work in IE6.
April 13th, 2009 at 6:36 PM
@Jarrid
I’m a little confused with the difference of your solution from the one listed in this tutorial.
Margin:0 auto; is shorthand for exactly what you have written. The text-align changes have to occur in order to prevent IE6 from rendering incorrectly. The option laid out above will center a website, and do so in all browsers. It really can’t be cut down any more — everything listed is needed.
May 30th, 2009 at 8:28 AM
Хм… что-то у меня ссылка не открывается, которую указали. Это у всех так, или только у меня?
June 11th, 2009 at 10:02 PM
Lieuy euy, kurang ngerti
tapi gpp, walu bgaimana pun
tutorialx bagus banget
OK dech,, Thanks a lot for u’r Tutorial^^
June 21st, 2009 at 8:42 AM
Hi there, I am just learning CSS. Can you please tell me how to do the side colors.
July 1st, 2009 at 2:11 PM
Actually I too would like to know how you would add a little color or design to the left and right sides of the now centered website! White sides can be a little boring… Besides having a solid color is it easy to implement a repeating background image on the sides like a logo?
Thanks!
July 1st, 2009 at 2:21 PM
@Raz
It’s simply a matter of adding something like “background-color: #000000;” to the style of the body
August 4th, 2009 at 6:33 AM
Hi,
I have tried this all morning but seem to be getting nowhere!
Can I paste my css somwhere so someone may be able to point out my problem?
Thanks
August 17th, 2009 at 11:01 PM
Thank you so much!!! I have been trying to do this for hours to no avail and then I found your wonderful website! Your explanation was so simple an easy!
December 11th, 2009 at 10:24 AM
Thanks for a great tutorial helps lot
February 27th, 2010 at 9:28 AM
What about centering it vertically …?
March 10th, 2010 at 5:42 PM
what about center tag?
August 2nd, 2010 at 1:48 PM
I know NOTHING about css. But I am trying to learn. This code seems simple, but I don’t know where to put the css code. I tried creating a new css and putting it there but did not work. Can someone tell me exactly where to put this css code in my site. Also, do I need to do it for every page? I have over 20 pages! Thanks
Join the Conversation!
Remember: Life's not all doom and gloom, so please keep it constructive. If we've made an error or missed something big, please let us know! Learning is revisions, after all.