:: Centralizar horizontalmente uma página na tela ::

Este tutorial foi atualizado em: 13/03/2011

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, independente da resolução ou tamanho do monitor usado pelo visitante.

O "truque" consiste em englobar todo o documento dentro de um div e estilizá-lo com regras CSS bem simples.

Em geral, uma página centralizada na tela é dimensionada para uma largura que se acomode numa tela com resolução de 800px ou 1024px de largura sendo esta a mais comum nos dias atuais (ano de 2011). Para nosso tutorial vamos admitir uma página com largura igual a 800px.

A largura total do DIV que engloba a página, o qual chamaremos #tudo será de 760px (este valor é bastante cômodo, para garantir que em nenhum navegador apareça uma barra de rolagem horizontal em 800 x 600 de resolução. Se você costuma projetar com valores diferentes use-o, mas certifique-se da eliminação da barra de rolagem horizontal em 800 x 600. Lembre-se que a largura da barra de rolagem varia de acordo com o navegador e sistema operacional, mas em geral não ultrapassa 24px, deixando-nos com a opção máxima de 800-24 = 776px para nossa #tudo. Os valores mais comuns adotados são 760px e 770px.

Para resolução de 1024px os valores mais comuns para a largura do #tudo variam de 900px a 1000px.

Então, para nosso tutorial, combinamos uma largura de 760px para #tudo. Se você simplesmente definir esta largura para o DIV ele será colocado, por padrão, no canto esquerdo da tela.

A propriedade CSS margin é usada para deslocar o DIV para a direita e centrá-lo na tela.

Mas, não sabemos qual é a definição da tela do usuário (cada usuário usa uma definição de acordo com seu gosto pessoal). Assim sendo não temos como calcular o quanto de margem devemos definir para centrar o DIV.

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: CSS possui 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, CSS calcula 1024px - 760px = 264px e coloca margens laterais de 264px / 2 = 132px CENTRANDO A PÁGINA. Isso é válido para qualquer que seja a resolução.

Mas, os mecanismos CSS do navegador Internet Explorer 6 e anteriores não funcionam como foi mostrado anteriormente. Ele funciona e centraliza a página em todos os navegadores, menos no IE6 e anteriores.

Devemos então usar um artifício (hack) para fazer funcionar naqueles navegadores se você pretende servir seu site para eles. A solução é simples, basta declarar text-align:center; no elemento body da página que resolvemos a questão, mas criamos um problema para todos os navegadores. A declaração centralizar a página no IE6 e anteriores, coloca todos os textos e conteúdos também centralizados, pois todos os elementos da página herdam a declaração de centralização. Assim, para corrigir a centralização dos conteúdos da página declaramos na #tudo, text-align:left; e tudos os conteúdos herdarão o alinhamento declarado em #tudo. Obrigado ao IE pelos seus "bugs" para as CSS.

Observe a seguir o código completo para você copiar e colar no seu editor e fazer mudanças para visualizar na prática como colocar uma página centrada horizontalmente na tela.

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 
Transitional//EN">
<html>
<head>
<title>Centrar uma  página com CSS</title>
<meta http-equiv="Content-Type" content="text/html; 
charset=iso-8859-1">
<style type="text/css">
body {
	margin:0;
	padding:0;
	background:#ccc;
	text-align:center; /* hack para o IE */	
	}
#tudo {
	width: 760px;
	margin:0 auto;			
	text-align:left; /* "remédio" para o hack do IE */	
	}
#conteudo {
	padding: 5px;
	background-color: #eee;
	}
</style>
</head>
<body>
<div id="tudo">
	<div id="conteudo">
		<h1>Pagina Centrada com CSS sem scroll até 800x600</h1>
		<p> Não use nenhum elemento HTML figuras, tabelas, etc...) com largura superior a 750px.</p>
	</div>
</div>
</body>
</html>

Foi recomendada largura máxima de 750px para inserção de elementos na página porque definimos 5px de padding esquerdo e direito. Então 760px - 5px - 5px = 750px.

Meu nome é Maurício Samy Silva e eu sou conhecido na Web como Maujor.

Mantenho o Site do Maujor hospedado em: maujor.com e meu e-mail de contato é maujorcss[ARROBA]maujor [PT]com.

Minha residência é em:

Copacabana - Rio de Janeiro,, RJ - - Brasil

Criado em: 2004-04-04