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).
Pretty great post. I just stumbled upon your blog and wanted to
mention that I have really loved surfing around your blog posts.
In any case I will be subscribing on your rss feed and I’m hoping you write again very soon!
Thanks for a simple explanation. How would you then center stuff inside that div?
If you simply want to center-align content within that div you can just use text-align:center.