[Turtle91]

I use a technique very similar. It uses table display properties without actually having to put any table tags. It automatically adjusts the top and bottom spacing so it’s consistent across devices and display sizes. It just uses two <div>s like this:

<div class="v-ctr">
  <div>
      <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>
  </div>
</div>

As soon as I get home from the airport I’ll post the CSS - I don’t have it on my phone.

You can include any styling, like the no-indent, italics, text-alignment, etc. in that CSS, so there is no need for additional class= declarations.

I have saved this as a clip in Sigil, so all I need to do is highlight the lines I want vertically centered and click on the clip. It works great for things like the title page, Dedication, Acknowledgment, etc.

===<>===

Edit: Here is the CSS I use for the vertical center:

div.v-ctr {
    height: 100%;
    width: 100%;
    display: table;
    position: fixed;
    padding: 0;
    margin: 0;
    text-indent: 0;
}

div.v-ctr div {
    display: table-cell;
    vertical-align: middle;
    padding: 0;
    margin: 0;
    text-align: center;
    font-style: italic;
    color: purple;
}

As I said above, this uses a similar idea of using a table without having to use all the table tags by simply setting the display property of the outer <div> as table and the display property of the inner <div> as table-cell ... then it's just a matter of setting the vertical-align: to middle on the inner <div>. This will vertically center anything that is within the inner <div>.

The red color is any additional styling you wish to add like horizontal alignment, color, italics, etc.

I've attached an example image.

Also, here is the clip I've set if anyone is interested:

<div class="v-ctr">\n<div>\n\1\n</div>\n</div>

Cheers!