Vertical align table-cell nie działają z pozycji absolutnej

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; 
} 

Problem

Tekst powinien znajdować się w środku mojej "komórki tabeli". Wszystko działa zgodnie z oczekiwaniami, dopóki nie dodaję "position: absolute". Teraz nie może już umieszczać moich treści w środku? Dlaczego nie? Wciąż zna moją wysokość i szerokość, ponieważ ustawiłem ją w moim CSS.

Jakieś sprytne obejście tego problemu?

Answer 1

wszystko działa zgodnie z oczekiwaniami, aż dodam "position: absolute". Teraz nie można już umieścić mojej zawartości w środku? Dlaczego nie?

position: absolute siły display: block, odczytać numer dwa here.

chodzi o obejście, myślę, że będziesz musiał zawinąć go w innym elemencie:

<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

Istnieją pewne obejścia Odkryłem za to, takie jak dodanie skrótu przed pozycji:

#position: absolute; 

To Hack zostało znalezione tutaj: Vertical Centering in CSS

Answer 3

oto rozwiązanie:

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