Vertical center div with flexbox
<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>