Eu quero centrar um div
verticalmente com CSS. Eu não'não quero tabelas ou JavaScript, mas apenas CSS puro. Eu encontrei algumas soluções, mas todas elas estão faltando o suporte ao Internet Explorer 6.
<body>
<div>Div to be aligned vertically</div>
</body>
Como posso centralizar um div
verticalmente em todos os principais navegadores, incluindo o Internet Explorer 6?
Abaixo está a melhor solução versátil que eu poderia construir para centrar verticalmente e horizontalmente uma caixa de conteúdo de largura fixa, **altura flexível***. Foi testada e funcionando para versões recentes de Firefox, Opera, Chrome e Safari.
.outer {
display: table;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
margin-left: auto;
margin-right: auto;
width: 400px;
/*whatever width you want*/
}
<div class="outer">
<div class="middle">
<div class="inner">
<h1>The Content</h1>
<p>Once upon a midnight dreary...</p>
</div>
</div>
</div>
Ver um exemplo de trabalho com conteúdo dinâmico
Eu incorporei algum conteúdo dinâmico para testar a flexibilidade e adoraria saber se alguém vê algum problema com isso. Deve funcionar bem para sobreposições centradas também -- lightbox, pop-up, etc.
Na verdade, você precisa de dois mergulhos para a centralização vertical. O mergulho que contém o conteúdo deve ter uma largura e altura.
#container {
position: absolute;
top: 50%;
margin-top: -200px;
/* half of #content height*/
left: 0;
width: 100%;
}
#content {
width: 624px;
margin-left: auto;
margin-right: auto;
height: 395px;
border: 1px solid #000000;
}
<div id="container">
<div id="content">
<h1>Centered div</h1>
</div>
</div>
Aqui está o [resultado][1].
Infelizmente - mas não surpreendentemente - a solução é mais complicada do que se desejaria. Também infelizmente, você precisará usar mergulhos adicionais em torno do mergulho que você quer verticalmente centrado.
Para navegadores compatíveis com padrões como Mozilla, Opera, Safari, etc. você precisa definir o mergulho externo para ser exibido como uma table e o mergulho interno para ser exibido como uma table-cell - que pode então ser centrado verticalmente. Para o Internet Explorer, você precisa posicionar o mergulho interno absolutamente dentro do mergulho externo e então especificar o top como 50%. As páginas seguintes explicam bem esta técnica e fornecem algumas amostras de código também:
Há também uma técnica para fazer a centralização vertical usando JavaScript. Alinhamento vertical do conteúdo com JavaScript & CSS demonstra-o.