¿Cómo alinear verticalmente en el centro del contenido de un div con ancho / alto definido?

¿Cuál sería el método correcto para centrar verticalmente cualquier contenido en un ancho / alto definido div?

En el ejemplo hay dos contenidos con diferentes alturas, cuál es la mejor forma de centrar verticalmente ambos usando la clase .content. (y funciona para todos los navegadores y sin la solución de table-cell)

Tiene algunas soluciones en mente, pero le gustaría conocer otras ideas, una está usando position:absolute; top:0; bottom: 0;y margin auto.

He investigado esto un poco y, por lo que he encontrado, tiene cuatro opciones:

Versión 1: div principal con visualización como celda de tabla

Si no le importa usar display:table-cellen su div principal, puede usar las siguientes opciones:

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

Demo en vivo

Versión 2: div principal con bloque de visualización y celda de tabla de visualización de contenido

.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;    
}​

Demo en vivo

Versión 3: div principal flotante y div de contenido como celda de tabla de visualización

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

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

Demo en vivo

Versión 4: posición div principal relativa con posición de contenido absoluta

El único problema que he tenido con esta versión es que parece que tendrás que crear el CSS para cada implementación específica. La razón de esto es que el div de contenido debe tener la altura establecida que llenará su texto y el margen superior se calculará a partir de eso. Este problema se puede ver en la demostración. Puede hacer que funcione para cada escenario manualmente cambiando el% de altura de su div de contenido y multiplicándolo por -.5 para obtener su valor de margen 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;
}​

Demo en vivo

Esto también se puede hacer usando display: flexsolo unas pocas líneas de código. Aquí hay un ejemplo:

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

Demo en vivo

Encontré esta solución en este artículo.

.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 como un encanto si la altura del elemento no es fija.

margin: all_four_margin

al proporcionar el 50% a all_four_margin colocará el elemento en el centro

style="margin: 50%"

también puedes aplicarlo para seguir

margen: arriba a la derecha abajo a la izquierda

margen: parte superior derecha e inferior izquierda

margen: superior e inferior derecho e izquierdo

dando el% apropiado obtenemos el elemento donde queramos.