flexbox - 离子含量内的 Ionic 4 中心离子网格

Question

我只是在那个 h1 中的一个离子网格中有一个离子含量。

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

我将离子含量设置为 100vh，离子网格设置为 80%；高度。如何在离子含量内垂直居中离子网格？并在离子网格内垂直居中 h1？

我尝试将 ion-content 设置为显示 flex（我确定它已经是）并且还对齐内容中心。与离子网格相同。

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

结果如下（离子网格粘在离子含量的顶部而不是垂直居中，因此 align-content: center 不起作用。与离子网格和 h1 相同）：

标签： flexboxionic4

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>

这是示例的链接