title: Vertical center div with flexbox
body: <p>I tried vertically centering a div with flexbox:
  Oddly <code>align-items: center</code> didn't change anything. After playing around for some time I realized that I need to set body <em>and</em> html to <code>height:100%;</code>.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="login_container"&gt;
      &lt;div class="login"&gt;&lt;/div&gt;
      &lt;div class="login"&gt;&lt;/div&gt;
      &lt;div class="login"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#login_container {
      display: flex;
      align-items: center;
      justify-content: center;
      height:100%;
  }
  .login {
      background-color: #008000;
      width: 100px;
      height: 100px;
      margin: 2px;
  }
  </code></pre>
  
  <p>For comparison: <a href="https://jsfiddle.net/z8m6n6pz/" rel="nofollow">This fiddle</a> is working while <a href="https://jsfiddle.net/boyjembw/" rel="nofollow">this one</a> isn't.</p>
  
  <p>Why do I have to add</p>
  
  <pre><code>body,html {
      height:100%;
  }
  </code></pre>
  
  <p>so that the div is vertically aligned? Am I missing something?</p>