Центральная строка в сетке в ионной компоновке

Question

Я хочу расположить по вертикали ряды сетки в ионной компоновке.Я пытался использовать css-утилиты таким образом, но это не работает:

<ion-content>
  <app-auto-logout></app-auto-logout>
   <ion-grid justify-content-center align-items-center style="height: 100%">
   <ion-row>
      <ion-col col-6>
        <ion-card text-center padding color="dark" [routerLink]="'/members/recipe'" routerDirection="forward">
          <ion-icon src="/assets/images/notepad.svg" class="home-icon"></ion-icon>
        </ion-card>
      </ion-col>
      <ion-col col-6>
        <ion-card text-center padding color="dark" [routerLink]="'/drums'" routerDirection="forward">
          <ion-icon src="/assets/images/drum.svg" class="home-icon"></ion-icon>
        </ion-card>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col col-6>
        <ion-card text-center padding color="dark" [routerLink]="'/storage'" routerDirection="forward">
          <ion-icon src="/assets/images/storage.svg" class="home-icon"></ion-icon>
        </ion-card>
      </ion-col>
      <ion-col col-6>
        <ion-card text-center padding color="dark" (click)='openModal()' routerDirection="forward">
          <ion-icon src="/assets/images/warning.svg" class="home-icon"></ion-icon>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

Спасибо, Федерико.

[РЕДАКТИРОВАТЬ: добавлен скриншот]

Этоснимок экрана: