Centralizar objeto na página com CSS
maio 20th, 2008De vez enquando surge a necessidade de centralizar algum objeto (como divs, imagens, ou até um site inteiro) em uma página independente da resolução do monitor.
Vou colocar aqui como lembrete essa dica que um dia eu li em algum tutorial no site do Maujor.
Nesse exemplo eu centralizei uma div de tamanho 780x184px. Observe que se vc diminuir a janela ou aumentar, o conteúdo vai estar sempre centralizado, tanto verticalmente quanto horizontalmente.
O segredo:
No CSS, nas propriedades do objeto que vc quer centralizar (no meu caso é a div #enter), coloque:
left:50%;
top:50%;
position:absolute;
margin-left:-390px; /* metade da largura do objeto, deve ficar negativo */
margin-top:-92px; /* metade da altura do objeto, deve ficar negativo */
E pronto, já era!!
Desculpa não explicar detalhadamente o tutorial, é que estou com um pouco de pressa, mas você pode analisar o código fonte do meu exemplo e vai ver que não é nada difícil.












maio 23rd, 2008 at 20:51
Legal! Encontrei um que centraliza objetos quando não há altura definida, tô passando rápido, mas depois te mando, é bem util…
maio 24th, 2008 at 10:08
tá ai oh:
http://lbulcao.net/xtras/centralizar.html
maio 26th, 2008 at 23:04
Lia! Muito legal o blog ^^. A gente é colega da comuna lá na “desafios de dark art”
Putz css é uma cosa que as vezes da muita dor de cabeça rsrsrs
maio 29th, 2008 at 18:27
krhaus@msn.com ^^
junho 5th, 2008 at 23:48
Ow Lía, faltou mencionar a nomenclatura oficial…
id=”seguranomeio”
te cuida, fía
fevereiro 3rd, 2010 at 21:18
Muito obrigado pelo código!!! procurei que nem um loco e o seu foi o unico que foi facio e pratico….obrigado! bjo