Ionic 4 grille ionique centrale dans le contenu ionique

Question

J'ai simplement un contenu ionique à l'intérieur d'une grille ionique à l'intérieur d'un h1.

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

J'ai mon contenu ionique réglé à 100vh, et la grille ionique réglée à 80%; la taille. Comment centrer verticalement la grille ionique dans le contenu ionique? Et centrer verticalement le h1 dans la grille ionique?

J'ai essayé de définir le contenu ionique pour afficher flex (ce qui, j'en suis sûr, déjà) et également aligner le centre de contenu. Idem avec la grille ionique.

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

Voici le résultat (la grille ionique est collée au sommet du contenu ionique plutôt que centrée verticalement, donc aligner le contenu: le centre ne fonctionne pas. Idem avec la grille ionique et le h1):

Answer 1

Where is your row and column tags.  Like this!

<ion-grid>
  <ion-row>
    <ion-col>
      ion-col
    </ion-col>
    <ion-col>
      ion-col
    </ion-col>
    <ion-col>
      ion-col
    </ion-col>
    <ion-col>
      ion-col
    </ion-col>
  </ion-row>

  <ion-row>
    <ion-col size="6">
      ion-col [size="6"]
    </ion-col>
    <ion-col>
      ion-col
    </ion-col>
    <ion-col>
      ion-col
    </ion-col>
  </ion-row>
</ion-grid>