title: Why `align-items:center` in flex can't vertically center the inner elements as a whole?
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*{
      margin:0;
      padding:0;
  }    
  #main{
      margin:0 auto;
      width:300px;
      height:180px;
      border:1px solid red;
      display:flex;
      flex-direction:column;
      justify-content:center;
      align-items:center;
  }       
  #inner{
      width:100px;
      height:40px; 
      line-height:40px;
      border:1px solid red;
      text-align:center;
      margin-bottom:10px;
  } </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="main"&gt;
      &lt;div id="inner"&gt;inner box&lt;/div&gt;
      &lt;img src="https://i.stack.imgur.com/VOK9C.png" alt=""&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I want to vertically center the inner div and image in the main div as a whole.<br>
  <code>flex-direction:column;</code>  make column as my flex direction,<code>justify-content:cneter;</code> horizontally center all inner elements in main div.<br>
  Why <code>align-items:center</code> in flex can't vertically center the inner elements as a whole?</p>