margin: auto;

#main {
  width: 600px;
  margin: 0 auto; 
}
<div id="main">

Colocando a width de um elemento block-level previne o mesmo de esticar até ás fronteiras do recipiente à esquerda e direita. Então, podes configurar a margem esquerda e direita com auto para centrar o elemento horizontalmente dentro do seu recipiente. O elemento vai ficar com a largura que especificaste, o resto do espaço será então dividido em partes iguais entre as duas margens.

O unico problem que ocorre quando a janela do browser é mais pequena que a largura do teu elemento. O browser resolve isto criando uma scrollbar horizontal na página. Vamos melhorar esta situação...

</div>
  • Creative Commons License