如何使用Flexbox在Ionic5中实现ion-content内容垂直居中

算力阿峰

2026-10-5

问题原因

你为ion-grid设置了flex布局后，flex默认的主轴为水平方向，导致两个ion-row被横向并排排列，才会出现内容被水平分割、忽略行布局规则的问题。

解决方案

只需要修改ion-grid的CSS配置，调整flex主轴为垂直方向即可，修改后的完整CSS如下：

ion-toolbar {
    --padding-start: 5%;
    --padding-end: 5%;
    --background: var(--ion-color-primary);
    --border-width: 0 !important;
    color: var(--ion-color-primary-contrast);
}

ion-back-button {
    color: var(--ion-color-primary-contrast);
}

ion-content {
    --padding-start: 5%;
    --padding-end: 5%;
    --background: var(--ion-color-primary);
    --overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

ion-item {
    --background: none;
}

.subtext {
    color: var(--ion-color-primary-contrast);
    /* 可选：如果需要标题文本居中可以加下面这行 */
    /* text-align: center; */
}

ion-grid {
    display: flex;
    /* 调整主轴为垂直方向，让row上下排列 */
    flex-direction: column;
    justify-content: center;
    /* 子元素宽度占满容器 */
    align-items: stretch;
    height: 100%;
    width: 100%;
}