[JSWolf]

Originally Posted by DNSB

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???).

  <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>

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).

I would change <p> to <p class="noindent"> and use a class of...

/noindent {
  text-indent: 0;
}

Otherwise, good job. Without the noindent class, the centered lines are off center because of the text-indent for <p>.