I have a blue box on a page that is 100 px from the top and left. Then I want text in the blue box to vertically align. Why won't my code below vertically align the text?
<!DOCTYPE html>
<html>
<body>
<div style="height:200px; background:blue; display:table-cell; vertical-align:middle; color:white;position:absolute; top:100px; left:100px;">
this is text;
</div>
</body>
</html>
How do I get the text to vertically align?
Notes - If I remove position absolute, then the text vertically aligns. But this is not acceptable, because I need absolute positioniong for some other things.