如何使用弹性框垂直居中图像

Question

我正在尝试使用弹性框垂直居中图像。

这是我的代码：

<ion-grid>
    <ion-row>
      <ion-col>
        <div class="logo-part">
          <img id="logo" src="assets/logo/logo.png" alt="img-logo">
          <ion-title>Service at your fingertips!</ion-title>
        </div>
      </ion-col>
    </ion-row>
</ion-grid>

.CSS：

ion-content ion-grid {
  height: 100%;
}
ion-content ion-row{
  height: 50%;
}
div.logo-part {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
}
img{
width:25%;
text-align:center;
}

图像未垂直定位在中心！

请帮忙吗？

谢谢。

Answer 1

那是因为 flex-direction: column ，当你使用它时，align-items开始水平对齐而不是垂直对齐，要垂直对齐，你需要设置justify-content: center

只是为了解释这种行为：这是因为两端对齐内容根据主要方向对齐，并根据交集对齐项目。因此，当您将弹性方向从行(水平(更改为列(垂直(时，两端对齐内容将垂直对齐，项目将水平对齐。 - 罗德里戈·费雷拉