How to center a web page with CSS

The most common question I get asked when teaching CSS layout design is how to center a web page in the browser. Let me show you how:

Create a container for all of your page content and place it inside your body tags of the HTML page:

<body>

   <div id=”container”>

      <p>Your web page content goes here</p>

   </div>

</body>

Then style that container using the following CSS code:

#container {

   width:960px;

   margin-left:auto;

   margin-right:auto;

}

That’s it! You now have a container 960 pixels wide that is centered in the browser. Just place all of your page content inside of the container div tags (the content itself will be left aligned within the container).