desenvolvimento para web - xhtml, css, padrões da web, usabilidade, acessibilidade, web design, SEO, blogs e tecnologias para desenvolver a web

Folhas de estilo vieram para facilitar a vida de desenvolvedores web, quanto a isso não há dúvidas. Dúvidas, mesmo, são em relação a algumas técnicas CSS para alcançar determinados posicionamentos e resultados como, por exemplo, como deixar um site sempre no centro usando as folhas de estilo. Pode parecer que é algo complicado de fazer e/ou que se trata de uma técnica CSS mais complexa; para a felicidade de quem mexe com CSS, tanto novatos quanto veteranos, colocar um site sempre no meio com as folhas de estilo em cascata é simples de ser feito.

Tão simples que, na verdade, existem diversas maneiras de se centralizar um site em qualquer resolução de tela usando CSS. São técnicas variadas, que, quando aplicadas, produzem o mesmo efeito esperado - de centralizar uma página web ou site completo. Como todas as técnicas servem para a mesma coisa, fica “a gosto do freguês” escolher qual utilizar.

Centralizar site com CSS: posicionamento relativo e margens automáticas

Esta é uma das mais simples técnicas para alcançar o efeito de o site ficar sempre no centro, independentemente da resolução de tela do visitante.

Basicamente, deve haver uma div principal, que “englobará” o restante das divs do site. Geralmente os desenvolvedores costumam denominá-la “wrap”, “principal”, “site”, “all” ou algum outro nome que designe que esta é a div “externa” do site; a “casca” que está sempre ao centro. Como as outras divs ficam como sendo descendentes, a “mágica” acontece.

#wrap {
width:750px; /* largura fictícia */
margin:0 auto;
}

Para quem não sabe, a declaração de margin indica que as margens superior e inferior serão “0″ e as margens esquerda e direita serão calculadas automaticamente; ou seja, o site fica centralizado!

Centralizar site com CSS: posicionamento absoluto e margem esquerda negativa

Também é possível centralizar todo um site através de posicionamento absoluto. Para tanto, vamos utilizar a mesma div “wrap” como exemplo.

#wrap {
left:50%;
margin-left:-375px; /* metade da largura fictícia */
position:absolute;
width:750px;
}

Quando alguma div tem posicionamento absoluto, ela se baseia em seu elemento pai para se posicionar. No caso, como ela não tem elemento pai, então vai se basear na página, em si - body. Então, para conseguir o efeito de centralização, jogamos uma margem esquerda de 50%, para que vá para o meio. Mas é o limite da esquerda da div “wrap” que foi jogada 50% neste sentido; então, para que o centro da página é que fique no meio, aplica-se uma margem negativa da metade do valor total da largura.

Qual das duas técnicas de centralizar o site é melhor?

Como disse, qualquer uma das técnicas CSS para centralizar um site pode ser usado; ambas produzem efeitos semelhantes. A diferença principal é que uma atribui um posicionamento relativo à div principal e a outra um posicionamento absoluto. Isso, levando-se em consideração as divs filhas, tem um grande impacto na composição do layout, como um todo.

Mas isso é assunto para um outro artigo… ;-)