Centralizar site com CSS: posicionamento absoluto e margem esquerda negativa

Postado por Andreo Costa | Categoria: Dicas e Tutoriais | Postado em 20-01-2010

7

É possível centralizar todo um site através de posicionamento absoluto. Para tanto, vamos utilizar a div de id “geral” como exemplo, ou seja: A div id=geral receberá todas as divs, e servirá como base para centralizar.

#geral {
left:50%;
margin-left:-375px; /* metade da largura que você usar, negativa */
position:absolute;
width:750px;
} 

Se você não quer usar pelo código, mas pelo dreamweaver, acesse assim:

 

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.

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.

Particularmente, eu prefiro assim, pois com metodos relativos já tive problemas de o preenchimento e margem da div “geral” não aparecer (pra variar o IE).

Valeu pessoal. Comentem se conseguiram usar.

Centralizar site com CSS: posicionamento absoluto e margem esquerda negativa

Comentários (7)

Muito legal! Eu tava precisando rever isto, já não lembrava mais! Tá muito bom o blog Andreo! Abração

achei legal, mas esse “framework”, http://960.gs , sempre me salva a vida, é barbada de instalar e usar, além de deixar mais fácil e ágil, separando o tipografia, posicionamento e tamanhos. Vale conferir!

Olá amigo,

Tenho um problema no meu site que não consigo resovler, apesar de ter lido tudo a respeito: Colocar centralizado no browser. Talvez por conta da meu pouco conhecimento em html.
Caso posso me ajudar, agradeço desde já.

Abraços,

Carlos Lucchesi

Tenho problema de centralização no browser no meu site. Não sei pq não dá certo o que vc colocou no post. Poderia verificar a razão?
Grato,

Carlos Lucchesi.

Seu site pelo que vi está todo em div absolutas. No exemplo que passamos no blog, existe uma div com a configuração dada, e as demais dentro desta. Porém, se observares, as divs deste site que nos passou estão assim: div style=”position: absolute;… ou seja, todas absolutas, aí não rola mesmo!
Abraço

ola não consigo centralizar o meu site feito em flash Mx, pode me ajudar??

Mas só com flash não é muito fácil mesmo. Edite o index dele no Dreamweaver

Deixe um comentário!