Banner propaganda da DevMedia - Cursos de desenvolvimento web

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;			
 }

Conheça os livros do Maujor®

Clique a "capinha" para visitar o site do livro

capa livro jQuery capa livro ajaxjQuery capa livro css capa livro html capa livro javascript capa livro html5 capa livro css3 capa livro jQuery Mobile capa livro jQuery UI capa livro SVG capa livro RWD capa livro foundation capa livro HTML5 e CSS3 capa livro Bootstrap3 capa livro Sass e Compass

topo