Altura y alineación vertical

La altura del elemento principal debe tener un valor estático (es decir, no automático ni porcentaje). Si no se especifica la altura, el navegador la calculará en función del contenido, lo que puede generar resultados inesperados.

Posicionamiento de elementos en línea

Al contrario de la alineación de texto , que se aplica al elemento que contiene a nivel de bloque, la alineación vertical debe aplicarse al elemento en línea que desea colocar.

Diferencias del navegador

Es posible que los navegadores más antiguos no Admite alineación vertical de forma consistente. Sin embargo, los navegadores modernos lo manejan bien, incluso cuando se usan en elementos no en línea.

Ejemplo: Centrar texto

Por ejemplo, suponga que tiene el siguiente HTML:

Para centrar el texto verticalmente en #inner, aplique vertical-align: middle to #header:
#header {
  display: inline-block;
  line-height: 1em;
  margin: 0;
  vertical-align: middle;
}
Tenga en cuenta que en este ejemplo, #inner es un elemento de bloque en línea con una altura fija.