Not sure if this is exactly what was wanted but it seems to work for me. Not quite sure from my notes but think I lifted this from a post on MobileRead a few years back (2010???).
Code:
<div class="vcenter1"></div>
<div class="vcenter2">
<table>
<tbody>
<tr>
<td>
<p>Happy birthday to you,</p>
<p>Peace and happiness to you,</p>
<p>May your life be filled with gladness,</p>
<p>Happy birthday to you!</p>
</td>
</tr>
</tbody>
</table>
</div>
Code:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.vcenter1 {
float: left;
height: 45%;
margin-bottom: -2em;
}
.vcenter2 {
clear: both;
height: 0em;
position: relative;
}
table,tr,th {
height: 100%;
width: 100%;
text-align: center;
}
You need both the body and html settings. The vertical centering depends on having the right starting point so I tweak the height in vcenter1 to keep the text close to vertically centered. (the 4 lines used 45%, the 8 lines used 40% in vcenter1).