Ionic 4 center ion grid within ion-content

Question

I simply have an ion-content within that an ion-grid within that an h1.

<ion-content no-padding no-bounce>
    <ion-grid no-padding>
        <h1>ion-grid</h1>
    </ion-grid>
</ion-content>

I have my ion-content set to 100vh, and the ion grid set to 80%; height. How do I vertically center the ion grid within the ion-content? And vertically center the h1 within the ion grid?

I tried setting the ion-content to display flex (which I'm sure it already is) and also align-content center. Same with the ion-grid.

Here is my CSS:

ion-content {
    display: flex;
    height: 100vh;
    width: 100vw;
    align-content: center;

    ion-grid {
        display: flex;
        height: 80%;
        width: 100%;
        background-color: blue;
        align-content: center;
    }
}

Heres the result (the ion-grid is stuck to the top of ion-content rather than vertically centered so align-content: center does not work. Same with ion grid and the h1):

Answer 1

With the below 3 lines we can add centered text.

<ion-content padding>   
  <ion-grid style="height: 100%">
    <ion-row justify-content-center align-items-center style="height: 100%">
      <h1>ion-grid</h1> 
    </ion-row> 
  </ion-grid>
</ion-content>

Here is the link for sample