Vertical align table-cell don't work with position absolute

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

The text should be placed in the middle of my "table cell". Everything works as expected until I add "position: absolute". Now it can't place my content in the middle any more? Why not? It still knows my height and width because I set it in my CSS.

Any clever workaround for this?

Solution 1

Everything works as expected until I add "position: absolute". Now it can't place my content in the middle any more? Why not?

position: absolute forces display: block, read number two here.

As for a workaround, I think you'll have to wrap it in another element:

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

Solution 2

here is the solution:

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

Solution 3

There are some workarounds I've discovered for this, such as adding a hash before position:

#position: absolute;

That hack was found here: Vertical Centering in CSS

Comments

[DanV]

I had to set my wrapper div to display: table to get this to work

[tsingroo]

tks, it helps me a lot