Centralizando layout com posicionamento e margens negativas

Sem dúvida o método de centralização de layout em CSS mais usado é com margens automáticas, mas tem que se colocar um hack para o IE5.x para que tudo de certo. Também você tem que estilizar dois elementos de vez um só. Por isso prefiro usar centralização com margens negativas.

Mãos a massa:
Crie um contêiner(elemento que envolve seus elementos), defina sua largura. Defina a posição do contêiner como relativa e configura a propriedade left como 50%. Isso posicionará a borda esquerda do contêiner no meio da página.

#moldura { --- elemento que conterá seus divs e suas classes
width: 800px;
position: relative;
left: 50%;}

Você não quer centralizar a borda esquerda do conteiner; você quer centraliza-lo. Então, aplicaremos uma margem negativa do lado do contêiner, igual à metade da largura do contêiner. Isso move o contêiner para esquerda para o meio, centralizando-o na tela.

#moldura { --- elemento que conterá seus divs e suas classes
width: 800px;
position: relative;
left: 50%;
margin-left: -400px;}

Veja que foi usado a especificidade do CSS aqui. Primeiro mandamos o contêiner flutuar com sua borda esquerda para o meio da página, depois enviamos um comando para ele voltar para esquerda para centralizar.
Em artigo futuro falarei mais sobre Especificidade do CSS.

Subscreva o CSS-Desvandado completo!
Subscreva CSS - Desvendado por Email