margin: auto;

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

Definir a largura (width) de um elemento de bloco previne que ele se estique para as pontas do elemento onde está contido tanto pra esquerda quanto para a direita. Logo, você pode modificar as margens à esquerda e à direita em automático - auto - para centralizar o elemento horizontalmente aonde está contido. O elemento vai ocupar a largura especificada, então o espaço restante será dividido igualmente entre as duas margens.

O problema que pode ocorrer é quando a janela do navegador é menor que a largura do elemento. O browser resolve isso criando uma barra de rolagem horizontal na página. Vamos melhorar isso...

</div>
  • Creative Commons License