Centralizar div na horizontal e vertical com CSS
Postado por: Pedro Rogério emQuando você inicia seus estudos com CSS, uma das primeiras coisas que quer aprender é a centralizar divs na página independente da resolução do usuário. Existe uma forma muito simples de fazer isso somente com a utilização de CSS. Observe a seguinte marcação HTML:
<div id="box"></div>
O que nós vamos fazer agora é centralizar essa div na tela do usuário utilizando o seguinte CSS:
#box {background-color:#ff0000; height:480px; left:50%; position:absolute; top:50%; width:640px}
A primeira vista você pode pensar que somente definindo position:absolute e as coordenadas left e top com 50% para a div funcionarão, mas vejam nesse exemplo o que acontece. Infelizmente assim não conseguiremos centralizar a div horizontalmente nem verticalmente, o segredo para que isso aconteça é muito simples, temos que adicionar margens negativas ao elemento que você deseja centralizar, da seguinte forma:
#box {background-color:#ff0000; height:480px; left:50%; margin:-240px 0 0 -320px; position:absolute; top:50%; width:640px}
Agora se repararem nesse exemplo, verão que a div estará sempre centralizada na tela independente da resolução do usuário. O segredo é utilizar as margens top e left com valores negativos. A base para se chegar a esses valores é a seguinte: Para a margin-top você deve pegar a altura total do elemento e dividir por 2, como temos alí uma div com um height de 480px, o valor final é de 240px, e para margin-left pegamos a largura total do elemento, que alí é de 640px, dividimos por 2, e chegamos ao valor de 320px. A partir daí basta utilizar esses valores negativos.
Testei e funciona perfeitamente nos seguintes Browsers: IE6, IE7, Firefox 2.0.0.18, Firefox 3, Safari 3(Win), Opera 9.5, Opera 10 Alpha, Google Chrome e Flock.
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o CSS no Lanche também escreve para o Pinceladas da Web, blog com assuntos gerais sobre desenvolvimento web.
Valeu pela dica Pedro!
Legal…vc testou em todos os browsers? se testou poderia colocar lá falando que funcionou corretamente neles…uma dica do amigo aki….
Como sempre Pedro Rogério sempre mandando muito bem, sempre procurei algo desse tipo mais na net não encontrei algo que fosse bem explicado parabéns!
http://www.maujor.com/tutorial/meio_tela.php
Da uma olhada, acho que ele copiou de você
Bem, existem outras maneiras de se centralizar um site, eu por exemplo utilizo o margin auto.
Centralizano um site horizontalmente:
Exemplo: margin: 0 auto;
Ele define zero para as margens superior e inferior e automatico para as laterais(esquerda e direita).
Pelos meus testes isso funciona em quase todos os browsers.
@Clovis margin: 0 auto ele alinha somente na horizontal, porém como o título diz o alinhamento é tanto na horizontal quanto na vertical!
Ex se vc tem um conteudo pekeno e quer deixar o mesmo no centro da janela ta ai uma solução!
abraços
@Eduardo,
Adicionei ao final do post os browsers ao qual testei.
Muito bom esse post. Eu no começo de minha viagem pelo mundo de CSS sempre tive curiosidade de saber como fazer isso. Pois vinha da era TABLE… Agora sei como se faz isso e é sussa. O bom é sempre ter vários exemplos e maneiras diferentes de se fazer… Pode parecer cópia de outros blogs (maujor), mas na realidade não é. Maujor manda bem tbm, e o Pedro Roxério tbm é o cara.
Voti, eh mesmo, vai ver o MAJOUR copiou de você suhuhsuhs
* Criado em: 2004-06-20
* Atualizado em: 2005-05-12
Cara, andei pesquisando isso a muito tempo
e só agora fui ver isso.
parabéns pela iniciativa!
Com certeza a dica boa, mas infelizmente só funciona se definir o height. As vezes a gente precisa usar com o height automático. Não entendo porque o CSS não oferece uma coisa que é usado tanto. Valeu o artigo! Falou.
Difíl é fazer isso com valores váriaveis! Tive esse problema em um rodapé, onde eram aplicadas várias marcas com alturas diferentes! Utilizando tabelas com vertica-align era fácil deixa-las com valor middle, mas tenta usar uma lista… bem complicado!
A solução: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
Esse tutorial é de iniciante em WebStandards. E principalmente para aqueles que estão migrando da era TABLEs.
Por isso é comum encontrarmos em outros blogs.
É impossível ter um site que ensina WebStandards e não tenha um post desses.
Parabéns, Pedro. Essa era uma dúvida absurda que eu sempre tive.
Copiar um post, é o que os pseudo-blogueiros fazem. E o Pedro Rogério nem precisa provar que não é disso!
Abs
Putzzz uma vez eu penei pra fazer isso, mais ai nosso amigo Pedro ai da a dica e tudo fica facil né… valeu t+…
Muito bom pedro, já apliquei este tutorial em um job aqui.
Obrigado.
maravilha é muito massa esse tuto e me ajudou muito obrigado.
Faaí rapaz, mt bm código,porém, naminha resolução de 1680 x 1050 não funciona mt bem, fica deslocado pra direita! Se puder responder de q forma resolver o problema, agradeço novamente. Vlw rapaz!
Alinhamento vertical e horizontal com CSS é uma técnica muito usada para fazer aqueles popups (geralmente com jQuery)… e o show dela é ser aceita em todos os browsers sem Bug.
Excelente post! Além de ser de grande utilidade, está muito bem explicado. Parabéns pelo conteúdo! É o meu primeiro contato com o blog e já o adicionei aos meus favoritos.
Bah eu aprendi css mas eu sempre me esqueço disso pra centralizar as coisas valeu pela dica
Olá!
O assunto esclareceu sim a minha dúvida.
Porém executei no FF 800×600 e o quadrado vermelho ficou sem o top.
O que aconteceu?
@Rodrigo,
A área do quadrado é maior que a área útil, por isso.
Hum, ok!
Agora, para um site com layout relativamente simples (com uso de tableless) realmente se enquadrar em todas as resoluções possíveis, é adotado a prática de uso de diferentes arquivos css?
Ou seja, cada um para uma resolução?
VALEW MSM KRA ..
tem outro jeito tbm .. mas com o ie as vezes da certo .. as vezes nao
se vc usar o margin: 0px auto;
ele vai centralizar tbm … testei e deu certo ..
pelo menos no mozilla
flws
é… funcionou.
muito boa a dica.
valeu!
Essa necessidade da margem negativa se deve ao fato de que o left e top 50% marcam o início do block, não o meio. Assim, com a margem negativa com metade do tamanho e altura, forçamos um alinhamento ao meio do bloco.
Ótima dica! Abraço.
Caro Pedro,
sou iniciante em criação de site. Utilei o Illustrator para criar um layout e desenvolvi o site no Dreamweaver CS4. Agora só me resta fazer esse alinhamento na vertical mas estou apanhando muito.
Vi que muitos leitores entenderam como aplicar seu código e fazer a centralização. Eu não… rsrsrsrs… Não entendo bulhufas dos códigos que são gerados pelo Dreamweaver.
Peço que me ajude a entender como fazer isso no meu site. Aí vai a parte do código que acredito ser onde se deve realizar a alteração.
Desde já muito obrigado!
——————————————-
Bá demais cara! Demais mesmo, estou fazendo meu primeiro site, para uma floricultura, e não conseguia de jeito nenhum centralizar as divs, nem meu prof do curso de web soube fazer e pediu pra procurar na net, nao achei em lugar nenhum, e qndo achava nao dava certo. Do teu jeito deu certo, valeu mesmo. Muito útil! Curto mto teu site, continue assim!
O teste funciona perfeitamente quando temos uma div com altura e largura definidas. Mas qual seria a solução para o alinhamento vertical de um site que tem sua altura variável de acorcom com o conteúdo da página?
Cara, meus parabéns, sempre tive esse problema com layers e enfim consegui resolver graças a sua ajuda! Muito Obrigado mesmo e espero que continue contribuindo para o progresso da nossa área dessa maneira generosa!
Um Abraço!
MeU Amigo V A L E U! ! ! !! !!! !!!!!!
Muito bom o artigo, Pedro!
E as discussões nos comentários estão bem legais também!
Obrigado pela dica!
Parabens amigo, seu site tem me ajudado muito com as dicas.
abracos