イメージを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

ただ、クラス=水平フレックスに高さを追加しました。それは魅力のように働いた:)それは高さが必要でした。