Centering CSS divs can be harder than it seems. Sometimes I still have a difficult time with it on complex designs. It is best to start with a centered design then add to it rather than try to retroactively center a complex design!

At the most basic level, there are three factors are involved:
width, margin, and text-align.

- Center the body contents.
- Create a div with width less than 100%.
- Set div margins to auto.

The following is the bare minimum CSS needed to center a div:


body {
text-align: center;
}

div.main{
width: 80%;
margin: auto;
}