title: How to vertically align image with flex?
body: <p>I know its been answered, but none of the answers work for me.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="sm-col md-col-8 col-12"&gt;
    &lt;div class="horizontal-flex"&gt;
      &lt;div class="vertical-flex"&gt;
        &lt;img class="inline gallery-image-max" src="&lt;%= picture.dir %&gt;&lt;%= picture.filename %&gt;"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code> .vertical-flex {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  .horizontal-flex {
    display: flex;
    justify-content: center;
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/pYy0x.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pYy0x.png" alt="Example"></a></p>
  
  <p>Any solutions?</p>