[Slevin#7]

In some cases I wanna center images vertically on a single page. For that reason I set page-break-before and after on the container and center the image via flex.

HTML

<div class="single-page v-center">
  <figure>
    <img src="../images/aloha.png"/>
  </figure>
</div>

CSS

.single-page {
  -webkit-column-break-before: always;
            page-break-before: always;
                 break-before: always;
   -webkit-column-break-after: always;
             page-break-after: always;
                  break-after: always;
}

.single-page.v-center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Now, my question is, are there any downsides using the full 100vh, since I've seen some people using 98vh for whatever reason?

Also, I've noticed that Thorium (at least the version I'm running) doesn't recognize the page-break properties, but still uses the full 100vh for the conainer, which results in a container with the expected height but the container is split into two parts over two pages, while the image itself is put on the second page, overlaying text which is not nudged bottomwards. The space reserved is correct with 100vh, but it's not reserved on a single page, while the image is then taken out of the flow and put onto the second page. Really bad.

However, all other reader I've tested (Google, Apple, Calibre, PocketBook) seem to work well.

I'm grateful for any opinion on that.
Thanks