离子含量内的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在离子网格内垂直居中？

我尝试将离子含量设置为显示柔韧性（我确信它已经是）和对齐内容中心。与离子格栅相同。

这是我的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相同）：

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>

这是示例链接

Answer 2

Where is your row and column tags.  Like this!

<ion-grid>
  <ion-row>
    <ion-col>
      ion-col
    </ion-col>
    <ion-col>
      ion-col
    </ion-col>
    <ion-col>
      ion-col
    </ion-col>
    <ion-col>
      ion-col
    </ion-col>
  </ion-row>

  <ion-row>
    <ion-col size="6">
      ion-col [size="6"]
    </ion-col>
    <ion-col>
      ion-col
    </ion-col>
    <ion-col>
      ion-col
    </ion-col>
  </ion-row>
</ion-grid>