Como alinhar verticalmente no centro do conteúdo de uma div com largura / altura definidas?

Qual seria o método correto para centralizar verticalmente qualquer conteúdo em uma largura / altura definida div.

No exemplo existem dois conteúdos com alturas diferentes, qual a melhor forma de centrar verticalmente ambos utilizando a classe .content. (e funciona para todos os navegadores e sem a solução de table-cell)

Tenha algumas soluções em mente, mas gostaria de saber outras ideias, uma está usando position:absolute; top:0; bottom: 0;e margin auto.

Eu pesquisei um pouco e pelo que descobri você tem quatro opções:

Versão 1: div pai com exibição como célula de tabela

Se você não se importa em usar display:table-cellno div pai, pode usar uma das seguintes opções:

.area{
    height: 100px;
    width: 100px;
    background: red;
    margin:10px;
    text-align: center;
    display:table-cell;
    vertical-align:middle;
}​

Demonstração ao vivo

Versão 2: div pai com bloco de exibição e célula de tabela de exibição de conteúdo

.area{
    height: 100px;
    width: 100px;
    background: red;
    margin:10px;
    text-align: center;
    display:block;
}

.content {
    height: 100px;
    width: 100px;
    display:table-cell;
    vertical-align:middle;    
}​

Demonstração ao vivo

Versão 3: div flutuante pai e div de conteúdo como célula de tabela de exibição

.area{
    background: red;
    margin:10px;
    text-align: center;
    display:block;
    float: left;
}

.content {
    display:table-cell;
    vertical-align:middle;
    height: 100px;
    width: 100px;
}​

Demonstração ao vivo

Versão 4: posição div principal relativa com posição de conteúdo absoluta

O único problema que tive com esta versão é que parece que você terá que criar o css para cada implementação específica. A razão para isso é que o div de conteúdo precisa ter a altura definida que seu texto preencherá e a margem superior será calculada a partir disso. Esse problema pode ser visto na demonstração. Você pode fazer com que funcione para cada cenário manualmente, alterando a% de altura do seu div de conteúdo e multiplicando-o por -.5 para obter o valor da margem superior.

.area{
    position:relative; 
    display:block;
    height:100px;
    width:100px;
    border:1px solid black;
    background:red;
    margin:10px;
}

.content { 
    position:absolute;
    top:50%; 
    height:50%; 
    width:100px;
    margin-top:-25%;
    text-align:center;
}​

Demonstração ao vivo

Isso também pode ser feito usando display: flexapenas algumas linhas de código. Aqui está um exemplo:

.container {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
}

Demonstração ao vivo

Eu encontrei essa solução neste artigo

.parent-element {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Funciona perfeitamente se a altura do elemento não for fixa.

margem: all_four_margin

fornecendo 50% para all_four_margin colocará o elemento no centro

style="margin: 50%"

você pode aplicá-lo para seguir também

margem: canto superior direito inferior esquerdo

margem: superior direito e inferior esquerdo

margem: superior e inferior direito e esquerdo

ao fornecer% apropriado, obtemos o elemento onde quisermos.