Ячейка таблицы с вертикальным выравниванием не работает с абсолютным положением

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

Проблема

Текст должен быть помещен в середине моей "ячейки таблицы".Все работает как положено, пока я не добавлю «position: absolute».Теперь он больше не может поместить мой контент в середину?Почему бы и нет?Он по-прежнему знает мою высоту и ширину, потому что я установил его в своем CSS.

Какой-нибудь умный обходной путь для этого?

Answer 1

Все работает как положено, пока я не добавлю "position: absolute".Теперь он больше не может поместить мой контент в середину?Почему бы и нет?

position: absolute сил display: block, прочитайте номер два здесь .

Что касается обходного пути, я думаю, вам придется обернутьэто в другом элементе:

<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

вот решение:

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

Answer 3

Для этого я нашел несколько обходных путей, например, добавление хэша перед позицией:

#position: absolute;

Этот хак был найден здесь: Вертикальное центрирование в CSS