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?

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