如何将图像与flex垂直对齐？

Question

我知道它已被回答，但没有一个答案对我有用。

HTML：

<div class="sm-col md-col-8 col-12">
  <div class="horizontal-flex">
    <div class="vertical-flex">
      <img class="inline gallery-image-max" src="<%= picture.dir %><%= picture.filename %>">
    </div>
  </div>
</div>

CSS：

 .vertical-flex {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.horizontal-flex {
  display: flex;
  justify-content: center;
}

有什么解决办法吗？

Answer 1

使用align-items:center

.vertical-flex {
  display: flex;
  align-items: center; /*vertical align*/
  justify-content: center; /*horizontal align*/
  border: 1px solid red;
  height: 500px;
}

<div class="vertical-flex">
  <img class="inline gallery-image-max" src="http://lorempixel.com/100/100">
</div>

Answer 2

刚刚将高度添加到 class=Horizo​​ntal-flex。它就像一个魅力:) 它需要高度。