Forum How do I...?

Vertically center content on a @page

_savage
Hi, I noticed rather old posts that address this topic. Just curious if there's a good way of centering content, e.g.
<h1>Dedication</h1>
<p>To everybody.</p>

onto a generated page?
mikeday
You could put the content in a table with a single cell, vertical-align middle on the cell, and specify a height for the table. As you can see, CSS still struggles with vertical centering. :)
_savage
I was hoping for some Prince specific CSS property :)

Ah well, I might just use a margin-top though considering I know the dimensions of the @page. That using a table always leaves a hacky aftertaste...
mikeday
Yes, some margin or padding is definitely the easiest solution. In the future, the flexbox layout model may be one method for convenient vertical centering, although it may be overkill to implement it just for this.
cayhorstmann
As of 2024, there is a simple solution. Declare a container page with

.mycontainer {
min-height: 100vh;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center; /* align vertical */
text-align: center;
justify-content: space-around;
}

The key is the vh unit that Prince maps to 1/100th of a page height.The container fills the page, and you can use flex layout to add content as you please.