CSS Text Centering for absolutely positioned divs

[Specktor]

I've read most similar posts, but neither using line-height equal to height or display:table-cell + vertical-align:middle helps me center the numbers inside my divs that are absolutely positioned.Any help is appreciated.Html\[code\]<div id='test'></div>\[/code\]CSS\[code\]#test { position: relative; width: 100px; height: 100px; border: 1px solid black;}.cell { display: table-cell; vertical-align: middle; position: absolute; width: 33.33%; height: 33.33%; text-align: center;}.cell:hover { background-color: red;}\[/code\]Javascript\[code\]var cell = $("<div class='cell'></div>");var e = $('#test');var val;for(i=0;i<3;i++) { for(j=0;j<3;j++) { val = (i*3)+(j+1); c = cell.clone(); $(e).append(c); $(c).html(val); $(c).css('top',(i*33.33)+'%'); $(c).css('left',(j*33.33)+'%'); $(c).data('value',val); }}\[/code\]Link: http://jsfiddle.net/wB7Mk/1/