I'm using display:table, so I can use display:table-cell....that allows for vertical alignment using vertical-align:middle/bottom.
Your css above didn't have the definitions for classes: Titlea and Titleb...but I think I found the problem.
I noticed I hadn't included the author name on my example so I added that... (see attached) it also shows that you can have stuff aligned at the top, middle, and bottom all on the same page.
While making this example I remembered the discussion that we had on the other threads in MR about vertical centering that the rendering engine could calculate display space out of order... eg, it can report to the ePub that there are 1600 pixels available for viewing height (vh) but
then reserve some of that space for headers/footers/inspector widgets/etc. If the ePub calculates the formatting based on the 1600 pixels then the bottom of the display can be covered with the widget/footer.
On this example I changed the vh to 95 (95% of viewable height) to account for any lost space due to the renderer mis-reporting. This will leave a little bit of space at the bottom, but should look fine.
Code:
CSS:
body, p {text-align:center; font-family:serif; font-weight:bold;
text-indent:0; padding:0; margin:0}
h2.title {font-size:1.7em; text-transform:uppercase}
.auth {font-size:1.4em; font-variant:small-caps}
.sub {font-size:1.1em}
.pub {font-size:.8em}
.pub img {display:block; width:10%; margin:0 auto}
div.v-ctr, div.v-btm {height:95vh; width:100vw; display:table; position:fixed}
div.v-ctr div {display:table-cell; vertical-align:middle}
div.v-btm div {display:table-cell; vertical-align:bottom}
Code:
HTML:
<body>
<p class="auth">Thomas Perry</p>
<div class="v-ctr">
<div>
<h2 class="title">Eddie's Boy</h2>
<p class="sub">A Novel</p>
</div>
</div>
<div class="v-btm">
<div>
<p class="pub">
<img alt="" src="../Images/logo_MysteriousPress.png"/>
The Mysterious Press<br/>New York
</p>
</div>
</div>
</body>