如何垂直对齐图像与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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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