¿Alinea verticalmente el texto dentro de un elemento con una altura porcentual?

Question

Como tengo un elemento con una altura porcentual, no puedo usar el hack de altura de línea. ¿Alguien tiene alguna idea sobre cómo resolver esto?

<div height="100%"> 
    I want to be vertically aligned in the middle 
</div> 

Answer 1

Aquí es lo que quiere: http://www.jakpsatweb.cz/css/priklady/vertical-align-valid-solution-en.html

Answer 2

Hay que establecer el valor de la altura del div, a continuación, establecer line-height: value_of_div_height. line-height 100% no funcionará porque tomará valor de texto, no elemento div. Funciona con o sin vertical-align, siempre y cuando la altura = line-height

div { 
    height: 200px; 
    line-height: 200px; 
    display: block; 
} 

Método alternativo si usted quiere hacer con un párrafo dentro de un elemento div: http://www.w3.org/Style/Examples/007/center

DIV.container { 
    min-height: 10em; 
    display: table-cell; 
    vertical-align: middle } 
... 
<DIV class="container"> 
    <P>This small paragraph... 
</DIV> 

Answer 3

Si configura el tamaño de fuente, y usted sabe la cantidad de líneas de texto que tiene. Puede envolver el texto en un lapso. Y usa el siguiente CSS en el lapso.

span { 
    font-size:20px; 
    margin-top:-10px; //half the font-size (or (font-size*number of lines)/2) 
    position: relative; 
    top: 50%; 
}