Centralizar horizontalmente uma página na tela:

visualizações (desde 18/05/206) Publicado em: 04/04/2004 — Atualizado em: ➠ 13/03/2011 ➠ 18/05/2016

Introdução

Nota: Se você está à procura de uma técnica CSS para centrar um elemento na tela tanto horizontal como verticalmente consulte este tutorial.

Nesta dica vou mostrar como centrar horizontalmente uma página na tela.

O "truque" consiste em englobar todo o documento dentro de um elemento div, container geral e a ele dfinir regra CSS atribuindo-lhe margens laterais cm valor auto.

Para efeitos deste tutorial, vamos admitir uma largura total da página igual a 760px (este valor é bastante cômodo, para garantir que em nenhum navegador cm resolução de 800px x 600px apareça uma barra de rolagem horizontal, pois dos 800px de largura total há que se considerar a largura de eventual barra de rolagem vertical que é da ordem de 24px. Assim, 800px - 24px = 776px será o valor máximo da largura do nosso container geral div#tudo. Os valores mais comuns adotados nestes casos são 760px e 770px.

Nota: O valor inicial de 800px foi considerado apenas para exemplificar a teoria. Use o valor que for adequado a seu projeto. Por exemplo: para resolução de 1024px os valores mais comuns para a largura do #tudo variam de 900px a 1000px.

Se for definida uma largura de 760px para o div#tudo ele será renderizado, por padrão, no canto esquerdo da tela.

A propriedade CSS margin destina-se a definir margens em volta de um box CSS. Então para centrar um container com 760px basta definir uma margem esquerda igual a: (largura da tela - 760px) / 2.

A largura da tela do usuário não é conhecida pelo desenvolvedor e muito menos é uma largura única. Assim não há como calcular o quanto de margem devemos definir para centrar o container.

Felizmente as CSS prevêm o valor auto para a propriedade margin. Esse valor, que significa margem automática, quando definido à esquerda e à direita centra automaticamente o elemento ao qual foi aplicada a margem.

Funciona assim: as CSS possuem um mecanismo nativo que dimensiona o DIV com a largura especificada (no nosso caso 760px) e coloca margens esquerda e direita IGUAIS. Por exemplo: se a tela tem largura de 1024px o cálculo é feito assim:

1024px - 760px = 264px e as margens laterais automáticas são de 264px / 2 = 132px CENTRANDO A PáGINA. Isso é válido para qualquer que seja a largura da tela.

Observe a seguir os códigos para colocar uma página centrada horizontalmente na tela.

HTML

 ...
 <body>
  <div id="tudo">
   <!-- conteúdos da página -->
  </div>
</body>
</html>

CSS

 #tudo {
  width: 760px;
  margin:0 auto;			
 }