Vertical align table-cell no funciona con posición absoluta

http://jsfiddle.net/fQv97/

HTML

My text, should be align middle

CSS

 .table-cell { height: 200px; width: 200px; vertical-align: middle; background: #eee; display: table-cell; position: absolute; } 

Problema

El texto debe colocarse en el medio de mi “celda de la tabla”. Todo funciona como se espera hasta que agregue “position: absolute”. Ahora no puede colocar mi contenido en el medio más? Por qué no? Todavía sabe mi altura y ancho porque lo configuré en mi CSS.

¿Alguna solución inteligente para esto?

Todo funciona como se espera hasta que agregue “position: absolute”. Ahora no puede colocar mi contenido en el medio más? Por qué no?

position: absolute display: block fuerzas position: absolute display: block , leer el número dos aquí .

En cuanto a una solución alternativa, creo que tendrá que envolverla en otro elemento:

 
My text, should be align middle
.table-cell-wrapper { position: absolute; } .table-cell { height: 200px; width: 200px; vertical-align: middle; background: #eee; display: table-cell; }

Hay algunas soluciones que he descubierto para esto, como agregar un hash antes de la posición:

 #position: absolute; 

Ese truco se encontró aquí: centrado vertical en CSS

aquí está la solución:

 
My text, should be align middle