Centering with CSS

There are three methods to center elements using CSS.

The tricks listed here come mostly from Designing With Web Standards by Jeffrey Zeldman.

Auto Margin
margin: 0 auto; }
 * 1) element {

Pro: Is the most standard and easy way Con: None (it works with all commonly browsers since Internet Explorer 6)

Negative Margin
position: absolute; left: 50%; margin-left: -100px; /* half of width, including border and padding */ }
 * 1) element {

Con: Slightly complex Pro: Supported in a wide range of browsers

Text Alignment
text-align: center; }    text-align: left; }
 * 1) element {
 * 1) element * {

Con: Not supported by truly compliant browsers, considered a hack Pro: Supported by IE Windows