Centralizar uma página na tela

Nesta dica vou mostrar como centrar 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 uma div e estilizá-la com umas 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 800 x 600 px. Vamos então admitir esta hipótese de largura 800px para nossa página.

A largura total da div que engloba a página toda a qual chamaremos #tudo será adotada igual a 760px ( este valor é bastante cômodo, para garantir que em nenhum browser 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 rolagem horizontal em 800 x 600).

Então estamos acertados em uma largura de 760px. Se você simplesmente definir esta largura para a div ela será colocada no canto esquerdo da tela!

A propriedade CSS margin faz o “truque”. Basta definirmos que as margens esquerda e direita serão automáticas, pois CSS prevê o valor auto para as margens.

É assim: CSS dimensiona a div com a largura especificada e coloca margens esquerda e direita IGUAIS. Se a tela tem largura de 1024px, CSS calcula 1024px – 760px = 264px e coloca margens laterais de 264px / 2 = 132px CENTRANDO A PÁGINA qualquer que seja a resolução.

MAS QUE DROGA! O Internet Explorer interpreta errado a regra como ela foi mostrada acima. Ela funciona e centraliza a página em todos os brownsers, menos no IE :-(

Devemos então usar um artifício (hack) para fazer funcionar no IE. Basta declarar text-align:center; no elemento body da página e isto resolve, mas cria outro problema. Além de centralizar no IE coloca os textos também centralizados na página. E, para corrigir isto declaramos na #tudo, text-align:left; UFA! obrigado ao IE pelos seus “bugs” para as CSS.

Na parte codigo esta o codigo completo para você copiar e colar no seu editor e fazer mudanças para entender como colocar uma página centrada na tela.

Bons Estudos!

<!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">
<head>
<style type="text/css">
body {
margin:0;
padding:0;
background:#cccccc;
text-align:center; /* hack para o IE */	
	}
#tudo {
width: 760px;
margin:0 auto;			
padding: 10px;
text-align:left; /* "remédio" para o hack do IE */	
	}
#conteudo {
padding: 5px;
background-color: #eeeeee;
	}
</style>
</head>
<body>
<div id="tudo">
<div id="conteudo">
    <h1>Pagina Centrada com CSS sem scroll ate 800x600</h1>
    <p> Não use nenhum elemento HTML 
(figuras, tabelas, etc...) com largura 
      superior a 750px.<br></br><br><b>Bons 

Estudos!</b></br><br>djdaniel_radiovoxmania@hotmail.com</br></p>
</div>
</div>
</body>
</html>

Nós queremos saber sua opinião aqui