Vertical Centering in XHTML
What works in HTML may not work in XHTML - simply adding or removing the doctype line may show the effect coming and going.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
1. In FF and IE you must have a rule
2. In FF you must also have a rule on the html element body { height: 100% }html { height: 100%; }
So if your styles are
html, body { height: 100%; margin: 0; padding: 0; }
table.popup { height: 100%; width: 100%; }
table.popup td { vertical-align: middle; text-align: center; }
div.popup { position: relative; margin: 0 auto; font-size: 130%; }
Then the code below will center vertically and horizontally
<body>
<table class="popup">
<tr>
<td><div class="popup">
!CENTERED TEXT HERE!
</div></td>
</tr>
</table>
</body>