离子布局中网格的中心行

Question

我想在离子布局中垂直排列网格的行。 我试图以这种方式使用css-utilities，但是它不起作用：

<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>

谢谢， 费德里科。

[编辑：添加了屏幕截图]

这是屏幕截图：