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>