如何使用 flex box 使图像垂直居中？

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

Just to explain this behavior: this is because justify-content aligns according to the main direction and align-items according to the intersection. So, when you change flex-direction from row (horizontal) to column (vertical), justify-content aligns vertically and align-items horizontally. - Rodrigo Ferreira

如何使用 flex box 使图像垂直居中？

How to center vertically an image using flex box?

html

css

flexbox

ionic2