How to vertical and horizontal center content?

I have custom css rules for center content as image below. How to vertical and horizontal center content with typography helpers http://framework7.io/docs/typography.html?

Try this on the page-content element.

<div class="page-content display-flex flex-direction-column justify-content-center">
      <div>
        /* Content you want to vertical center in the page */
     </div>
</div>