[Turtle91]

Hi all,

Until now I've been using table properties to vertically center items (title, dedication, etc.) on the page. That works on my iOS reader of choice, but I've been told that table properties aren't handled very well on other/older devices.

Spoiler:

/* Vertically centered on page */

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


  <div class="v-ctr">
    <div>
      <h2 class="title">This is the Awesome Title</h2>
      <p class="series">myBooks Saga<br/>Volume 4242</p>
      <p class="author">Dionyseus the Great</p>
    </div>
  </div>

Soooo, I was kinda thinking around about the vh property and tying the top margin of a div to being 33vh with the div height being 33vh (so the div encompasses the middle third of the screen height.

That also seems to work - it's supported by all browsers, and it displays fine on Sigil - but I was wondering if anyone had experience with vh support "out in the wild"?? Or is it a case of the other/older devices that don't support table properties don't support vh either???

Spoiler:

div.titlearea          {margin:33vh 0; height:33vh; border:1px solid red}
div.titlearea p        {text-indent:0; text-align:center; font-style:italic}
div.titlearea p.title  {font-size:7.5vh}
div.titlearea p.series {font-size:3vh; padding-top:1vh}
div.titlearea p.author {font-size:5vh; padding-top:1vh}



<div class="titlearea">
<p class="title">This is the Awesome Title</p>
<p class="series">myBooks Saga<br/>Volume 4242</p>
<p class="author">Dionyseus the Great</p>
</div>