title: Why doesn't flex direction column with align-items=center center image properly
body: <p>I stumbled upon an issue with image centering within a flexbox with <code>direction:column</code>.</p>
  
  <p>Imagine you have two elements within a flexbox, where the first one contains an image:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="image-container"&gt;
          &lt;img class="img" src="https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg"&gt;
      &lt;/div&gt;
      &lt;div class="another-flex-child"&gt;
          Random content here
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  .container {
    height: 300px;
    background-color: green;
    display: flex;
    flex-direction: column;
  
    .image-container {
      flex: 1;
      align-self: center;
  
      .img {
        height: 100%;
      }
    }
  
    .another-flex-child {
      flex: none;
      background-color: red;
    }
  }
  </code></pre>
  
  <p>I would expect the image to be center horizontally within the div, but it appears the left border of the image is exactly at the center of the div.  </p>
  
  <p>When I replace the image with another div which contains some text it is placed as expected.</p>
  
  <p>Can anybody explain to me whats happening there?</p>
  
  <p><a href="https://jsfiddle.net/v1cLhkuf/47/" rel="nofollow noreferrer">Checkout this fiddle</a></p>