Alineación vertical-celda de la tabla no funcionan con la posición absoluta

Question

http://jsfiddle.net/fQv97/

HTML

<div class="table-cell"> 
    My text, should be align middle 
</div> 

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 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?

Answer 1

todo funciona como se espera hasta que añado "posición: absoluta". ¿Ahora ya no puede colocar mi contenido en el medio? Por qué no?

position: absolute fuerzas display: block, leen el número dos here.

En cuanto a una solución, creo que tendrá que envolverlo en un elemento más:

<div class="table-cell-wrapper"> 
    <div class="table-cell"> 
     My text, should be align middle 
    </div> 
</div> 

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

Answer 2

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

#position: absolute; 

se encontró que truco aquí: Vertical Centering in CSS

Answer 3

Aquí está la solución:

<div style="position: absolute; /*your position*/"> 
    <div class="table-cell"> 
     My text, should be align middle 
    </div> 
</div>