I have come across a number of websites and have helped a few people with this problem with not being able to center their layout – the correct way.
First things first you should be using a reset CSS such as Eric Meyer’s, this will get rid of unnecessary margins, padding etc that are default.
I like to create a div that everything gets “wrapped” in, for this we will use the ID wrapper. (remember you can only use ID’s once – class names can be used more than once).
Do not set a width to this and by default DIV’s are blocks and width is automatically 100%. Our #main-container will have a set width, margin 0 auto will center it.
For this tutorial I added a border to show that the container is centered. Then finally a class name main-content which has a padding of 20px so it’s not touching the edge.
That’s how you center a layout, leave a comment if you have any questions.
CSS
#wrapper{
background: #2A7D58;
}
#main-container{
width:960px;
margin: 0 auto;
color: #fff;
border:1px solid #fff;
}
.main-content{
padding:20px;
}
HTML
<div id="wrapper">
<div id="main-container">
<div class="main-content">
<p>This is a centered layout!</p>
</div>
</div>
</div>