Centralizar Página ou Div

Olá Pessoal,

Hoje vou mostrar aqui uma técnica para centralizar a página no meio da tela. Uma técnica muito comum é ativar a propriedade align="center" da tag div, porém não recomendo pois fica mais pra uma P.O.G, então vamos fazer isso com CSS, separando layout de conteúdo ;)

Vamos pensar na estrutura do site

Bom pelo que pode ser visto na imagem acima, teremos uma div principal que preencherá toda a tela e uma div conteúdo.

Vejamos como o HTML fica neste caso

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Web Como Um Todo!</title>
</head>

<body>
<div id="principal">
<div id="conteudo">
Conteúdo aqui!
</div>
</div>
</body>
</html>


Show! Já temos o conteúdo(HTML), agora é hora de definir o layout(CSS).

#principal{
width: 100%;
}

#conteudo{
width:500px;
margin:0 auto;
border: 1px solid #000000;
}


Repare que definimos estilos para as duas DIVs, na div PRINCIPAL definimos a largura em 100%, ou seja, a largura de toda tela será preenchida. No div CONTEUDO foi definido a largura para width:500px; (apenas para exemplo, você pode definir a largura que desejar), uma borda border: 1px solid #000000; (para melhor visualizar o efeito) e o grande responsável pelo alinhamento do div na tela a propriedade margin: 0 auto;

• Tweet This!
• Share this on Facebook
• Share this on del.icio.us
• Digg this!
• Add this to Google Bookmarks
• Share this on Linkedin
• Post this to MySpace
• Share this on Technorati
• Share this on FriendFeed