allineamento verticale table-cell non funzionano con la posizione assoluta

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

Il testo deve essere posizionato nel mezzo della mia "cella di tabella". Tutto funziona come previsto fino a quando aggiungo "position: absolute". Ora non può più posizionare il mio contenuto nel mezzo? Perchè no? Conosce ancora la mia altezza e larghezza perché l'ho impostato nel mio CSS.

Qualsiasi soluzione intelligente per questo?

Answer 1

tutto funziona come previsto fino a quando aggiungo "posizione: assoluta". Ora il numero non può più posizionare il mio contenuto nel mezzo? Perchè no?

position: absolute forze display: block, il numero due here leggere.

Per quanto riguarda una soluzione, credo che si dovrà avvolgerlo in un altro elemento:

<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

Ci sono alcune soluzioni che ho scoperto per questo, come l'aggiunta di un hash prima della posizione:

#position: absolute; 

Questo mod è stato trovato qui: Vertical Centering in CSS

Answer 3

ecco la soluzione:

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