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

我知道答案是肯定的，但没有一个答案对我有用

HTML:

---

有解决方案吗？

使用

对齐项目：居中


.vertical flex{
显示器：flex；
对齐项目：居中；/*垂直对齐*/
对齐内容：居中；/*水平对齐*/
边框：1px纯红；
高度：500px；
}

刚刚增加了类的高度=水平弯曲。它就像一个符咒：）它需要高度。
现在出现的问题是，带有类horizontal flex的div不能获得高度：100%：/
<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>