Вертикальное выравнивание таблицы-ячейки не работает с абсолютной позицией

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.

Любое умное обходное решение для этого?

Ответ 1

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

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

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

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

Ответ 2

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

#position: absolute;

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

Ответ 3

вот решение:

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