Ver post no novo domínio: http://rogeriolino.com/2007/01/17/css-centralizar-horizontal-e-vertical/
Uma grande dúvida que sempre surge é como centralizar um elemento no HTML, tanto verticalmente quanto horizontalmente, usando CSS.
Há duas maneiras de se fazer isso sem muito trabalho.
A primeira consiste em definir a posição do objeto como absolute e suas posições top e left com 50% e tirando a diferença (subtraindo) da metade de sua altura e metade de sua largura na margem. Por exemplo se um elemento tem 500px de largura e 400px de altura na margem vai ter um valor negativo (para top e left) igual a metade destes valores:
#minhaDiv {
width: 500px;
height: 400px;
top: 50%;
left: 50%;
margin-top: -200px;
margin-left: -250px;
position: absolute;
border: 1px solid black;
}
ou resumindo: margin: -200px auto auto -250px;
Pronto sua div vai ficar centralizada na janela. Mas temos um problema com isso.
Nesse caso sabemos o valor da altura do objeto, então tiramos a diferença na margem. Mas e se tivessemos um objeto em que sua altura pode variar (ou seja não sabemos o valor da altura) ?
Podemos solucionar isso usando o vertical-align, mas para ele funcionar temos que definir o display da div como table. A má notícia é que o nosso amigo IE não reconhece essa propriedade (e nem o valor table como display). A boa notícia que usando um hack para o IE dá pra acertar isso.
A estrutura para simular uma tabela fica assim:
<div id="tabela"> <div id="cell"> <div id="conteudo"> <p>parágrafo</p> </div> </div> </div>
E definimos no CSS o display da div tabela como table e da div cell como table-cell. Mas antes temos que acertar o html, body e a tabela para 100% (largura e altura).
html, body {
width: 100%;
height: 100%;
margin: 0px; /* retirando a margem padrão */
padding: 0px; /* retirando o padding padrão */
}#table {
width: 100%;
height: 100%;
display: table;
}#cell { display: table-cell; }
Com as divs já funcionando como tabela vamos definir a vertical-align como middle, isso na div cell.
#cell {
vertical-align: middle;
display: table-cell;
}
Falta agora setar a margin do conteudo como auto. E colocar um valor para largura, senão vai ficar 100%.
#conteudo {
width: 500px;
margin: auto;
}
Pronto, a div já vai aparecer centralizada no browser. Mas ainda está faltando o nosso amigo IE.
A idéia é quase a mesma da primeira situação. Como antes do conteudo temos uma div (cell), a gente defini seu position como absolute, e top como 50%. E na conteudo com position como relative, e top como -50%.
Lembrando que para não atrapalhar a definição correta, usaremos um hack que só influenciará no Internet Explorer.
Ficando o CSS final assim:
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}#table {
width: 100%;
height: 100%;
display: table;
background: #f1f1f1;
}#cell {
vertical-align: middle;
display: table-cell;
_position: absolute;
_top: 50%;
}#conteudo {
width: 500px;
margin: auto;
padding: 20px;
border: 1px solid black;
_position: relative;
_top: -50%;
}
E o HTML:
<div id=”table”>
<div id=”cell”>
<div id=”conteudo”>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>
</div>
Mais sobre:
Exemplo com a primeira situação
[update testado=”IE6, IE7, FIREFOX 2 e OPERA 9″]
html, body {
width:100%;
height:100%;
padding: 0px;
margin: 0px;
}#table {
width: 100%;
height: 100%;
position: static;
display: table;
*overflow: hidden; /* hack para o IE6 e IE7 */
*position: relative; /* hack para o IE6 e IE7 */
}#cell {
vertical-align: middle;
display: table-cell;
position: static;
*top: 50%; /* hack para o IE6 e IE7 */
*position: absolute; /* hack para o IE6 e IE7 */
}#conteudo {
top: -50%;
width: 500px;
margin: auto;
position: relative;
background: red;
}
[/update]
No IE, a altura da DIV cell faz com que se crie uma scrollbar, pois usa altura excede o navegador… Que fiz de errado?
#cell {
vertical-align: middle;
display: table-cell;
_position:absolute;
_top:50%;
}
Olá,
O problema é o seguinte, tô trabalhando com iframe, pra facilitar a manutenção, o index é uma tabela onde o iframe principal chama os arquivos .swf
Quando a visualização é 800X600 blza! Mas quando ajusta pra uma maior, ele permanece pequeno.
O que posso fazer para melhorar isso? Ou seja, adaptar a página ao tamanho de vizualização do visitante.
Muito obrigado pela atenção.
Não funcionou no IE 7… 😦
use os itens..que estao marcados como /hack para ie6 ie7
ou melhor abandona esse navegador..
é o mais lixo de todos..
Eu tenho um jeito mais fácil.
Se eu preciso colocar um conteúdo centralizado na tela com barras na lateral eu coloco divs com largura em porcentagem.
Ex.:
1. No XHTML:
Conteúdo
2. E depois no CSS
#esquerda {width:5%;}
#conteudo {width:90%;}
#direita {width:5%;}
E pronto ele centraliza certinho. Eu acho mais fácil.
Cara… vc salvou minha vida xD
Parabens ai
ao usar o 1º métudo o content das divs interiores á div que vai centrar, tambem centra verticalmente?
Parabéns pelo artigo! Finalmente uma solução simples para centralizar verticalmente.
Eh, realmente não funcionou no IE7. Centralizou apenas horizontalmente, na vertical ficou la no topo. 😦
Pingback: Blog HotSync » Dica de blog
Entaum meu amigu blz, entaum esse codigo naum adiantou nadam, naum solucionou o meu prob, pois esta totalmente errado isso e uma gambiarra do caccete q vc fez eu quero, e se eu quiser definir um tamanho pra minha DIV o q faço,… entendeu… o negocio tem q ser auto entendeu o negocio tem q usar table pra dar certo
ta vendo essa bosta de css so veio pra encher o saco em nossas vidas…
mas tudo bem
Que tal assim?
#super_corpo{
left:50%;
position:absolute;
width:400px;
height:500px;
}
#corpo{
position:relative;
left:-50%;
width:100%;
height:100%;
}
E no html:
AQUI VEM TODO O SEU CONTEUDO
ops, esqueci de escapar os caracteres das tags:
<div id="super_corpo">
<div id="corpo">
</div>
</div>
GAMBIARRA!
Cê não tem vergonha em colocar numero negativo?
Web Standards meu filho.
Querido Guto,
O que é WebStandards para você ?
Então quer dizer que não podemos fazer image-replacement utilizando overflow com número negativo, só porque não seria um número válido na WebStandards?!
Claro que concordo que é uma gambiarra, como por infelicidade temos que utilizar em outros casos (como nos hacks, conhece?).
É só uma maneira de se obter o tão questionado alinhamento. Como há outras maneiras já comentadas aqui nos próprios comentários do post.
Abraços.
É bom vc testar o q vc diz que sabe, nao funciona nem copiando na integra esse código… vamo fazer algo que presta viu…..
Dah um tiro no zoio desse kra q faloh gambiarra
Gambiarra eh usah Javascript igual tah no exemplo :p
Pingback: CSS: Centralizar Horizontal e Vertical #2 « Rogério Lino
naum funfou no ieca 7 nem a pau!!!
Pegue o CSS do Update que funciona no IE7.
Gambiarra é o que a mãe dele fez quando colocou ele no mundo,
aqui funcionou perfeitamente…
vlw cara
te amo
Pingback: jQuery Center plugin em Webpoint - Weblosofia com CSS, Jquery, Javascript, Ajax, PHP etc.
Muito bom o artigo Rogério. Se não se importa, precisei fazer uma referência sobre este método no seu post para um plugin para jQuery que criei que faz esta tarefa dinamicamente: http://www.alexandremagno.net/blog/?p=75
Abraços e sucesso…
Olá Rogério, td bem? gosto bastante do seu site 🙂
Mas eu tenho uma dúvida muito chata com relação a um div q tenho, onde existe ul e li dentro.
O ul parece q automaticamente já fica à esquerda, mas eu preciso q ele fique no centro.
Essa lista representa uma paginação, e ela realmente tem q ser centraçozada… ela não tem largura fixa.
Como vc faria?
Não funciona em nenhum navegador… não pelo código que vc criou… nos modelos que tem link no final do artigo, ambos funcionam.
opa
retiro meu comentário anterior… não havia visto o update.
Outra coisa… se copiar o codigo e colar no dreamweaver ou Expression Web, tem que redigitar as “áspas” pois ele copia errado… sei lá… 🙂
To aprendendo CSS por apostikas na net, e para centralizar fiz o seguinte:
CSS:
#exemplo {
width: 600px;
height: auto;
margin: 0 auto;
}
A DIV ficou centralizada…
porém, alguém sabe se isso da problema em algum navegador? (utilizo MAC e não testei nem no FireFox nem no IE, só Opera e Safari, e funcionou.)
Olá amigo!
Funcionou no Firefox mas não funcionou no IE7.
Puts rogério…..muito útil esse tutorial, to até usando e implementando….
FlW
Muito bom. Solucionou grande parte dos meus problemas. Se puder ajudar de alguma forma por favor entre em contato. A tempo, gostei da resposta dada acima a respeito da Webstandards.
Abraço!
Pingback: Centralizar tela em Silverlight 2.0 « Thiago Couto
Muito bom seu trabalho de divulgação do conhecimento. Parabéns.
Mas, tira essa porra de efeito neve que além de ser uma baitolagem prejudica a eficiência da leitura.
Além disto, este efeito já tá muito manjado.
Valeu
Você salvou minha alma da condenação eterna a ignorância sobre o alinhamento vertical! :o)
Parabéns!
olá usei esse alinhamento pra centralizar vertical e horizontal um arquivo em flash funfou so naum testei em todos os navegadores possiveis hahah mass naum sei se por ser flash quando eu diminuo a resolução da tela corta o flash tanto na horizontal como na vertical sei que isso talvez naum tenha haver com o alinhamento da div ou pode ser naum sei mais alguem sabe como solucionar essa questão?
Funciona no FF 3.0, Chrome IE 8….
E para os tabacudos que estão dizendo que não funciona…. no ctrl+c ctrl+v apaguem e reescrevam as ” (aspas) pq fica com caracter diferente….. di pega beleza
Tô usando o Blueprint css. Achei que a primeira técnica não funcionaria com o bp, mas funcionou, e salvou-me a vida.
Valeu. 🙂
Obrigado pela postagem me ajudou bastante e funcionou direitinho em todos os browsers. Só sinto uma ferramenta tão utilizada e atual como o css, não tenha uma maneira menos “suja” de centralizar um documento web. Espero que tudo isso seja corrigido. Mas valeu mesmo por este post.
Velho, sónão te beijo por 2 motivos:
1° tu tá longe
2° num gosto de homem (graças a Deus) e sim de mulher..
uauahuahauahuaha…
valeu TRUTA!!!!
Sacanagem o primeiro motivo é por que o cara está longe! rsrssr…
Obrigado por compartilhar esse conhecimento!
profissionalismo é tudo…que bom se todos os blogs/sites fossem como o seu…
(mas nada de beijos rsrsrs(coments acima))
rsrsr
abraços
bacanal meu!
O seu código foi o único que funcionou! Obrigadinho!
bacanal meu!
O seu código foi o único que NAO funcionou! Obrigadinho!
Pingback: Centralizar tela em Silverlight 2.0 | Thiago Marotta
Vou dar uma dica pra voces..
Olha o exeplo do ricardo ali..
que redireciona pra outra pagina..
ai ti vai ver div centralizada..
aumentar diminuir..
viu isso..
pronto esta no local certo..
agora..
maos a obra..
botao direito CLIK…
selecione
CODIGO FONTE..
bom..
ai tu copia o codigo fonte e muda as coisas de la..
+simples..
e aqui funcionou..
abç
Parabens pelo codigo, infelizmente o IE 7 complica a vida de miuita gente ….rsrsrsr nada como uma boa e velha gambis no código ….o importante é funcionar ….ser auditado num overflow é dificl …hauhauahuah 😉 have fun se caso quiser conhecer meu blog …tenho disponibilizado algumas vagas de trabalho por la e postado direto no twitter se interessar a alguem pode acessar ou seguir blog.blankabout.com.br ou @blankabout
por favor, to querendo centralizar verticalmente uma imagem que ta dentro de uma div, como faço? já tentei esse css mas não funcionou, pq deve ter a ver com o tamanho. o tamanho da imagem não é definido
Cara, muito boa a explicação, parabéns
Oii acho que sou meio lesa… mas eu devo criar um elemento no bloco de notas com essa tabela com a extensão html? é isso
Olá Rogério, será que pode me ajudar?
Como faço para que um site fique centralizado na pagina quando diminue o tamanho de vizualização na tela, ou seja de 100% para 50%, e neste caso ele fique centralizado vertical e horizontal nos mesmos tamnhos.
Rogério,
parabéns pelo trabalho, resolveu meu problema.
Obrigado.
Valeu!
Muito obrigado!!! Estava procurando como fazer isso a MUITO tempo!!!
Pingback: CSS: Centralizar Horizontal e Vertical #2 | Rogério Lino
Post muito bom, mas estou com um problema numa coisa…
Quando diminuo a janela, vai cortando o topo do site, e o scroll não consegue subir…
Alguem sabe resolver?
Obrigado!!! Me ajudou bastante, ótimo post.
Valeu, muito obrigada