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

Question

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?

score 40 · Accepted Answer · answered Jan 17 '12 at 15:25

40

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

answered Jan 17 '12 at 15:25

thirtydot

224,678
48
389
349

1

I had to set my wrapper div to display: table to get this to work – DanV Dec 15 '14 at 10:41
tks, it helps me a lot – tsingroo Aug 03 '18 at 11:27

score 3 · Answer 2 · edited Jan 17 '12 at 15:24

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

edited Jan 17 '12 at 15:24

thirtydot

224,678
48
389
349

answered Jan 17 '12 at 15:15

Matt K

6,620
3
38
60

score 3 · Answer 3 · answered Jan 17 '12 at 15:32

3

here is the solution:

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

answered Jan 17 '12 at 15:32

FlashTrava

119
6

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

3 Answers3

Linked