离子含量内的 Ionic 4 中心离子网格答案

【问题标题】：Ionic 4 center ion grid within ion-content离子含量内的 Ionic 4 中心离子网格
【发布时间】：2018-11-25 22:25:14
【问题描述】：

我只是在那个 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 相同）：

【问题讨论】：

标签： flexbox ionic4

【解决方案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

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

我个人使用此 CSS 代码将所有内容居中，将其放在您的 app.scss 文件中，并在每次您想在 ion-col 内垂直和水平居中组件时调用它：

.flex {
    display: flex;
    justify-content: center;
    align-items: center;
}

所以你的解决方案在这里：

<ion-content no-padding no-bounce>
    <ion-grid no-padding>
      <ion-row>
        <ion-col class="flex">
          <h1>ion-grid</h1>
        </ion-col>
      </ion-row>
    </ion-grid>
</ion-content>

【讨论】：