title: Why is my container not center aligned vertically and horizontally
body: <p>Why is my container not center aligned vertically and horizontally.</p>
  
  <pre><code>&lt;div class="flex-container"&gt;
    &lt;header&gt;&lt;/header&gt;
    &lt;article&gt;&lt;/article&gt;
    &lt;aside&gt;&lt;/aside&gt;
    &lt;footer&gt;&lt;/footer&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.flex-container {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-center: center;
  }
  
  .flex-container &gt; * {
    min-width: 100px;
    min-height: 100px;
  }
  
  header {
    background: rgba(200, 200, 200, 1);
  }
  
  article {
    background: rgba(200, 200, 200, .8);
  }
  
  aside {
    background: rgba(200, 200, 200, .6);
  }
  
  footer {
    background: rgba(200, 200, 200, .4);
  }
  </code></pre>
  
  <p>Below is a fiddle for the same.
  <a href="http://codepen.io/anon/pen/bAayc" rel="nofollow">http://codepen.io/anon/pen/bAayc</a></p>