¿Es esta la solución más sencilla y flexible para alinear verticalmente el texto dentro de un elemento de bloque?

Question

que podría ser la primera persona en descubrir esto (documento o al menos en la web):

HTML:

<div>Vertically Aligned Text<span></span></div> 

CSS:

div 
{ 
    height: 100px; /* or whatever % etc. */ 
} 

div > span 
{ 
    display: inline-block; 
    visibility: hidden; 
    height: 100%; 
    vertical-align: middle; 
} 

Funciona porque los aumentos de código la altura de la línea al 100% de su contenedor, pero no entiendo por qué la configuración vertical-align: middle; en el <span></span> afecta el texto.

No he encontrado esta solución documentada en la web, y es más simple y más flexible que otras que he encontrado. Además de que debería funcionar en todos los navegadores de Internet Explorer 6 en adelante (obviamente reemplazar el selector de hijo con otra cosa).

Para cumplir con el requisito de pregunta, ¿es esta la solución más simple y flexible a una pregunta antigua?

Answer 1

El uso del atributo de pantalla CSS table-cell me parece el método más fácil.

ver este jsFiddle

Y el CSS:

div 
{ 
    height:100px; /* or whatever % etc. */ 
    border: solid 1px black; 
    vertical-align : middle; 
    display : table-cell; 
} 

Answer 2

Este artículo describe todas las técnicas de alineación verticales (que yo sepa fuera :)), incluido, en el enfoque que tomó. http://phrogz.net/css/vertical-align/index.html