Ionic 3：行数不同的ion-col内容垂直居中解决方案咨询

嘿，这个问题我之前在项目里也碰到过，在Ionic中让同一ion-row里不同高度的ion-col内容垂直居中，其实有几个很靠谱的方案，最推荐的是用框架内置的Flex布局类，完全不用写额外的复杂CSS：

方案1：使用Ionic内置的align-items-center类 #

Ionic的ion-row本身就是Flex容器，官方已经提供了现成的对齐类，直接给ion-row加上align-items-center就能让所有子ion-col在垂直方向上居中对齐，这是最简洁且符合框架规范的做法。

修改后的代码示例：

<ion-content padding>
  <ion-grid>
    <!-- 关键：给ion-row添加align-items-center类 -->
    <ion-row align-items-center>
      ....other cols....
      <ion-col col-6>
        <label>Date of Audit: 
          <h2>01/30/18<br/> 1:06:50<small>PM UTC</small></h2>
        </label>
      </ion-col>
      <ion-col col-6 text-center class="overall-score">
        <label>Overall Score</label>
        <h1>90</h1> <!-- 假设这里是你的短内容 -->
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

原理是align-items-center会把Flex容器（这里是ion-row）的交叉轴（垂直方向）上的子元素（ion-col）居中对齐，完美解决不同高度内容的垂直居中问题。

方案2：自定义CSS（如果需要更灵活的控制） #

如果内置类满足不了你的特殊需求，也可以自己写CSS来控制，利用Flex布局的特性：

首先在全局或组件的CSS文件中添加：

.vertical-center-row {
  display: flex;
  align-items: center;
  /* 如果你需要row占满父容器的高度，可以额外加min-height: 100%; */
}

然后在HTML中给ion-row应用这个类：

<ion-row class="vertical-center-row">
  <!-- 你的col内容 -->
</ion-row>

注意事项 #

• 确保你的ion-col没有设置float或者position: absolute这类会脱离Flex布局的属性，否则居中效果会失效。
• 如果ion-col内部的元素还有嵌套布局，只要外层的ion-row设置了垂直居中，整个col的内容都会跟着居中。

内容的提问来源于stack exchange，提问作者Prashant