Dica CSS rápida para centralizar horizontalmente o layout

Post para alavancar minhas visitas. Sei que vai ter um montão de gente batendo aqui procurando por isso (liga risada maléfica)Muahuahua(desliga risada maléfica).

Uma das dúvidas mais populares de quem está começando a mexer com html e css é como centralizar seu layout. Existem muitas formas de fazer isso – algumas boas e outras nem tanto.

Começo pela melhor (a que eu uso e passo para quem trabalha comigo):

Width 100% no HTML body + margin 0 auto e clear both na div que envolve todo mundo

fica assim:

HTML, body {
width: 100%;
}
div#geral {
clear: both;
margin: 0 auto;
width: 775px; /* Não esqueça desse tamanho aqui */
}

A largura obviamente varia conforme a sua necessidade.

outra boa também é:

text-align no body e na div que envolve todo mundo

o código:

body {
text-align: center; /* Isso aqui é pro IE*/
}
div#geral {
margin: 0 auto;
text-align: left;
}

Uma que não recomendo usar, mas que tem um conceito útil para outras coisas é:

Position absolute com margin negativa da metade

Uma breve explicação: você coloca o layout começando no meio e “volta” com ele a metade do seu tamanho para que ele fique centralizado. Para layouts com largura de 770px, por exemplo, deve-se dar uma margem negativa de 385px.

O código:

div#geral {
position: absolute;
top:0;
left: 50%;
margin-left: -385px;
}

O princípio para centralizar verticalmente é o mesmo – 50% no top e “volta” com o layout pra cima com margin-top negativa, mas será que alguém ainda centraliza layout verticalmente?

Uma observação: onde tem div#geral você substitui com div#<id_da_div_que_envolve_tudo>.

Reli e faltou uma: a tag center. Simplesmente finja que não existe. É melhor.

Abraços!


Não quer perder o próximo post? Cadastre seu e-mail e você receberá um aviso sempre que sair coisa nova :)

Comentários

  • http://www.designlabs.com.br Victor Costa

    Toda vez que tenho que fazer isso, acabo sendo o chato do trabalho que fica pentelhando os desenvolvedores…

    Exelente a sua iniciativa, aagora no lugar de pentelhar os desenvolvedores, vou gerar visitas no seu blog!!!