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

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

只是为了解释这种行为:这是因为对齐内容根据主方向对齐,并根据交集对齐项目.因此,当您将flex(方向)从行(水平)更改为列(垂直)时,justify-content垂直对齐并水平对齐项目.- 罗德里戈费雷拉