CSSNow I’m not sure about you, but I really do hate websites that are stuck on the left of the screen, and from talking to a few friends, I know I’m not alone with this pet hate. The thing is, that many beginner site designers may also dislike this left alignment, but simply do not know how to make their site appear in the center of the screen, but others may have centered their site absolutely perfect in their favourite browser, but are totally unaware that it may not be centered in others.

Today, I’d like to share my own method of centering your website in any browser using CSS – I’m going to be using CSS in the head of the HTML document today for simplicity, although ideally you should place it into an external/linked stylesheet on your own pages.

The trick to centering pages in all browsers is using what’s commonly known as a ‘wrapper’, applying some auto margin to that div in the CSS, and then using a small workaround so that the wrapper is centered in IE.

I’m going to start by using a basic outline template, demonstrating the basic page structure and illustrating what I mean buy the wrapper – which is commonly just a div to contain everything in.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3.  
  4. <html>
  5.  <head>
  6.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7.   <title>Title</title>
  8.   <meta name="robots" content="index, follow" />
  9.   <meta name="keywords" content="" />
  10.   <meta name="description" content="" />
  11.   <style type="text/css">
  12.    body, html {
  13.     margin: 0;
  14.     padding: 0;
  15.    }
  16.    #wrapper {
  17.     width: 800px; /* your wrapper obviously needs a width otherwise it will be 100% */
  18.     margin: 0 auto; /* This is the proper way to center in a standards compliant browser */
  19.    }
  20.    /* This is the IE workaround*/
  21.    body { text-align: center; }
  22.    #wrapper { text-align: left; }
  23.    
  24.    /*Now to just add some colour to see it in action*/
  25.    body { background: #000; }
  26.    #wrapper { background: #fff; color: #000; }
  27.   </style>
  28.  </head>
  29.  
  30.  <body>
  31.   <div id="wrapper">
  32.    <h1>Title</h1>
  33.    <p>Content to go here.</p>
  34.   </div>
  35.  </body>
  36. </html>

Now you can see the structure is fairly simple – the wrapper is just a div with a id of “wrapper”, which we specify a width for, and then set the margins to “0 auto”, which means no pixels for top and bottom margins, and auto for left and right margins. the auto value for margins basically gives the left and right edges equal space between the edge of the wrapper div and the edge of the browser window.

Next, we have to add the workaround for IE6, because it doesn’t understand auto as a value for margin. We basically do this by using text-align:center for the body to center the div on the page, but this will also center everything inside the div too, so we then have to re-align this to the left again using text-align:left for the div itself.

I’ve applied some background colours to the body and the div, so that you can see the centering effect for yourself – go ahead and try it for your own pages, and test it in different browsers…enjoy.

Share and Enjoy:
  • Digg
  • StumbleUpon
  • del.icio.us
  • Google Bookmarks
  • Reddit
  • Design Float
  • Sphinn
  • Facebook
  • Mixx
  • blogmarks
  • Live
  • Propeller
  • Scoopeo
  • scuttle
  • Simpy
  • Spurl
  • Technorati
  • TwitThis
  • MisterWong
  • LinkedIn
  • Pownce
  • YahooMyWeb