Ionic Grid(v7)中卡片垂直居中及响应式布局实现问题

问题分析 #

你当前的代码未实现垂直居中的核心原因是：ion-content、ion-grid 和 ion-row 未占满视口高度，导致 ion-align-items-center 没有足够的垂直空间生效。

修改后的代码 #

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button>Home</ion-menu-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content color="primary" class="ion-padding ion-fullheight">
  <ion-grid style="height: 100%;">
    <ion-row class="ion-justify-content-center ion-align-items-center" style="height: 100%;">

      <ion-col size="12" class="ion-text-center">
        CENTERED TITLE
      </ion-col>

      <ion-col size="12" size-lg="6">
        <ion-card [button]="true" class="ion-padding">
          <!-- 卡片内容 -->
        </ion-card>
      </ion-col>
      <ion-col size="12" size-lg="6">
        <ion-card [button]="true" class="ion-padding">
          <!-- 卡片内容 -->
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

关键调整说明 #

• ion-fullheight 类：让 ion-content 占满整个视口高度，提供垂直居中所需的空间。
• ion-grid 设置高度 100%：确保网格容器占满 ion-content 的高度。
• ion-row 设置高度 100%：让行容器占满网格高度，此时 ion-align-items-center 才能将行内所有元素（标题+卡片）垂直居中。
• 简化列尺寸配置：size="12" 已覆盖小屏（sm及以下）场景，无需重复声明 size-sm="12"，大屏通过 size-lg="6" 实现并排布局。
• 移除冗余嵌套：直接给标题所在列添加 ion-text-center，替代额外的 div 嵌套。

效果验证 #

• 大屏设备：标题居中，两张卡片并排显示，整体内容在页面垂直居中。
• 小屏设备：标题居中，两张卡片上下排列，整体内容在页面垂直居中。

内容的提问来源于stack exchange，提问作者DeLac