flexbox - ion-content 内的 ionic 4 中心 ionic 网格

Question

我只是在那个 h1 中的一个 ionic 网格中有一个 ion-content 。

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

我的 ion-content 设置为 100vh， ionic 网格设置为 80%；高度。如何在 ion-content 内垂直居中 ionic 网格？并在 ionic 网格内垂直居中 h1？

我尝试将 ion-content 设置为显示 flex(我确定它已经是这样)并对齐内容中心。与 ionic 网格相同。

这是我的 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;
    }
}

结果如下( ionic 网格粘在 ionic 内容的顶部而不是垂直居中，因此 align-content: center 不起作用。与 ionic 网格和 h1 相同):

Answer 1

通过以下 3 行，我们可以添加居中文本。

<ion-content padding>   
  <ion-grid style="height: 100%">
    <ion-row justify-content-center align-items-center style="height: 100%">
      <h1>ion-grid</h1> 
    </ion-row> 
  </ion-grid>
</ion-content>

Here is the link for sample