Você está procurando a arquiteta e designer carioca Lia Siqueira? Clique aqui

De 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!! :D

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.

;)

Gostou desse Post?

Tá calor em Manaus!! Que tal pagar um sorvete pra mim?

6 Comentários em “Centralizar objeto na página com CSS”

  1. Lari Bulcão Says:

    Legal! Encontrei um que centraliza objetos quando não há altura definida, tô passando rápido, mas depois te mando, é bem util…

  2. Lari Bulcão Says:

    tá ai oh:
    http://lbulcao.net/xtras/centralizar.html

  3. krhaus Says:

    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

  4. krhaus Says:

    :D ;) :P hehehehehehe add nos dois sim xD

    krhaus@msn.com ^^

  5. Ruan Carvalho Says:

    Ow Lía, faltou mencionar a nomenclatura oficial…

    id=”seguranomeio”

    :D heiehiehei, me passo

    te cuida, fía

  6. rodolfo passos gallo Says:

    Muito obrigado pelo código!!! procurei que nem um loco e o seu foi o unico que foi facio e pratico….obrigado! bjo

Faça um comentário sobre o post