Usando margem: automático para alinhar verticalmente um div

Portanto, sei que podemos centralizar uma div horizontalmente se usarmos margin:0 auto;. Deve margin:auto auto;funcionar como eu acho que deve funcionar? Centralizá-lo verticalmente também?

Por que também não vertical-align:middle;funciona?

.black {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,.5);
}
.message {
    background:yellow;
    width:200px;
    margin:auto auto;
    padding:10px;
}

<div class="black">
    <div class="message">
        This is a popup message.
    </div>
</div>

JSFiddle

Atualização de agosto de 2020

Embora ainda valha a pena ler o seguinte para obter informações úteis, já temos o Flexbox há algum tempo, então apenas use-o de acordo com esta resposta .

Você não pode usar:

vertical-align:middleporque é não aplicável a elementos nível de bloco

margin-top:autoe margin-bottom:autoporque seus valores usados ​​seriam computados como zero

margin-top:-50%porque os valores de margem baseados em porcentagem são calculados em relação à largura do bloco que contém

Na verdade, a natureza do fluxo de documentos e os algoritmos de cálculo da altura do elemento tornam impossível usar as margens para centralizar um elemento verticalmente dentro de seu pai. Sempre que o valor de uma margem vertical é alterado, ele irá disparar um recálculo da altura do elemento pai (refluxo), que por sua vez irá disparar um recentramento do elemento original ... tornando-o um loop infinito.

Você pode usar:

Algumas soluções alternativas como esta que funcionam para o seu cenário; os três elementos devem ser aninhados da seguinte forma:

.container {
    display: table;
    height: 100%;
    position: absolute;
    overflow: hidden;
    width: 100%;
}
.helper {
    #position: absolute;
    #top: 50%;
    display: table-cell;
    vertical-align: middle;
}
.content {
    #position: relative;
    #top: -50%;
    margin: 0 auto;
    width: 200px;
    border: 1px solid orange;
}

<div class="container">
    <div class="helper">
        <div class="content">
            <p>stuff</p>
        </div>
    </div>
</div

JSFiddle funciona bem de acordo com Browsershot.

Desde que esta pergunta foi feita em 2012 e já percorremos um longo caminho com o suporte do navegador para flexboxes, eu senti que essa resposta era obrigatória.

Se a exibição de seu contêiner pai for flex, então sim , margin: auto auto(também conhecido como margin: auto) funcionará para centralizá-lo horizontalmente e verticalmente, independentemente de ser um elemento inlineou block.

#parent {
    width: 50vw;
    height: 50vh;
    background-color: gray;
    display: flex;
}
#child {
    margin: auto auto;
}

<div id="parent">
    <div id="child">hello world</div>
</div>

Observe que a largura / altura não precisa ser especificada de forma absoluta, como neste exemplo jfiddle, que usa o tamanho em relação à janela de visualização.

Embora o suporte do navegador para flexboxes esteja em alta no momento da publicação, muitos navegadores ainda não o suportam ou exigem prefixos do fornecedor. Consulte http://caniuse.com/flexbox para obter informações atualizadas de suporte ao navegador.

Atualizar

Como essa resposta recebeu um pouco de atenção, também gostaria de salientar que você não precisa especificar marginse está usando display: flexe gostaria de centralizar todos os elementos no contêiner:

#parent {
    width: 50vw;
    height: 50vh;
    background-color: gray;
    display: flex;
    align-items: center; /* horizontal */
    justify-content: center; /* vertical */
}

<div id="parent">
    <div>hello world</div>
</div>

Aqui está a melhor solução que encontrei: http://jsfiddle.net/yWnZ2/446/ Funciona no Chrome, Firefox, Safari, IE8-11 e Edge.

Se você tem uma declarada height( height: 1em, height: 50%, etc.) ou é um elemento onde o navegador sabe a altura ( img, svgou canvaspor exemplo), então tudo que você precisa para centralização vertical é esta:

.message {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    margin: auto;
}

Você normalmente desejará especificar um widthou max-widthmais, o conteúdo não se estende por toda a extensão da tela / contêiner.

Se você estiver usando isso para um modal que deseja sempre centralizado na janela de visualização sobrepondo outro conteúdo, use position: fixed;para os dois elementos em vez de position: absolute. http://jsfiddle.net/yWnZ2/445/

Aqui está um artigo mais completo: http://codepen.io/shshaw/pen/gEiDt

Edit: é 2020, eu usaria flex box em vez disso.

Resposta original:

Html

<body>
  <div class="centered">
  </div>
</body>

CSS

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Sei que a pergunta é de 2012, mas descobri a maneira mais fácil de todas e queria compartilhar.

HTML:

<div id="parent">
     <div id="child">Content here</div>
</div>

e CSS:

#parent{
     height: 100%;
     display: table;
}    
#child {
     display: table-cell;
     vertical-align: middle; 
}

Se você souber a altura do div que deseja centralizar , poderá posicioná-lo absolutamente dentro de seu pai e definir o topvalor como 50%. Isso colocará o topo do div filho 50% abaixo de seu pai, ou seja, muito baixo. Puxe-o de volta definindo seumargin-top para a metade de sua altura. Então agora você tem o ponto médio vertical do div filho sentado no ponto médio vertical do pai - centralizado verticalmente!

Exemplo:

.black {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,.5);
}
.message {
    background:yellow;
    width:200px;
    margin:auto auto;
    padding:10px;
    position: absolute;
    top: 50%;
    margin-top: -25px;
    height: 50px;
}

<div class="black">
    <div class="message">
        This is a popup message.
    </div>
</div>

http://jsfiddle.net/yWnZ2/2/

Essas duas soluções requerem apenas dois elementos aninhados.
Primeiro - Posicionamento relativo e absoluto se o conteúdo for estático (centralização manual).

.black {
    position:relative;
    min-height:500px;
    background:rgba(0,0,0,.5);

}
.message {
    position:absolute;
    margin: 0 auto;
    width: 180px;
    top: 45%; bottom:45%;  left: 0%; right: 0%;
}

https://jsfiddle.net/GlupiJas/5mv3j171/

ou para design fluido - para centro de conteúdo exato, use o exemplo abaixo:

.message {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

https://jsfiddle.net/GlupiJas/w3jnjuv0/

Você precisa definir 'min-height' caso o conteúdo ultrapasse 50% da altura da janela. Você também pode manipular essa altura com consulta de mídia para dispositivos móveis e tablets. Mas apenas se você jogar com design responsivo.

Acho que você poderia ir mais longe e usar um script JavaScript / JQuery simples para manipular a altura mínima ou a altura fixa se houver necessidade por algum motivo.

Segundo - se o conteúdo for fluido, você também pode usar as propriedades css de tabela e célula de tabela com alinhamento vertical e alinhamento de texto centralizado:

/*in a wrapper*/  
display:table;   

e

/*in the element inside the wrapper*/
display:table-cell;
vertical-align: middle;
text-align: center;

Funciona e escala perfeitamente, muitas vezes usado como solução de web design responsivo com layouts de grade e consulta de mídia que manipulam a largura do objeto.

.black {
    display:table;
    height:500px;
    width:100%;
    background:rgba(0,0,0,.5);

}
.message {
    display:table-cell;
    vertical-align: middle;
    text-align: center;
}

https://jsfiddle.net/GlupiJas/4daf2v36/

Eu prefiro a solução de tabela para a centralização exata do conteúdo, mas em alguns casos o posicionamento absoluto relativo fará um trabalho melhor, especialmente se não quisermos manter a proporção exata do alinhamento do conteúdo.

Não existe uma maneira fácil de centralizar o div verticalmente, o que funcionaria em todas as situações.

No entanto, existem muitas maneiras de fazer isso, dependendo da situação.

Aqui estão alguns deles:

• Defina o preenchimento superior e inferior do elemento pai, por exemplo, preenchimento: 20px 0px 20px 0px
• Use a tabela, a célula da tabela centraliza seu conteúdo verticalmente
• Defina a posição relativa do elemento pai e os divs que deseja centralizar verticalmente como absoluto e estilize-o como superior: 50px; inferior: 50px; por exemplo

Você também pode procurar no google por "centralização vertical css"

altura variável, margem superior e inferior automática

.black {background:rgba(0,0,0,.5);
width: 300px;
height: 100px;
display: -webkit-flex; /* Safari */
display: flex;}
.message{
background:tomato;
margin:auto;
padding:5%;
width:auto;
}

<div class="black">
<div class="message">
    This is a popup message.
</div>

altura variável, margem superior e inferior automática

Usando Flexbox:

HTML:

<div class="container">
  <img src="http://lorempixel.com/400/200" />
</div>

CSS:

.container {
  height: 500px;
  display: flex;
  justify-content: center; /* horizontal center */
  align-items: center;     /* vertical center */
}

Ver resultado

.black {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,.5);
}
.message {
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background:yellow;
    width:200px;
    padding:10px;
}

 - 


----------


<div class="black">
<div class="message">
    This is a popup message.
</div>