title: vertical align with flexbox in IE11 and IE10
body: <p>How to make a cross browser solution where an element is vertical aligned?</p>
  
  <p><a href="http://jsfiddle.net/e2yuqtdt/3/" rel="noreferrer">http://jsfiddle.net/e2yuqtdt/3/</a></p>
  
  <p>This works in both Firefox and Chrome, but not in IE11</p>
  
  <pre><code>&lt;div class="page_login"&gt;
      &lt;div&gt;vertical-align:center; text-align:center&lt;/div&gt;
  &lt;/div&gt;
  
  html, body {
      height:100%;
  }
  
  .page_login {
      display:flex;
      height:100%;
      width:100%;
      background:#303030;
  }
  
  .page_login &gt; div {
      margin:auto;
      background:#fff;
      min-height:100px;
      width:200px;
  }
  </code></pre>
  
  <h1>update</h1>
  
  <p>When the centered element is higher than the viewport height the background is only 100% and not 100% scroll height</p>
  
  <p><a href="http://jsfiddle.net/e2yuqtdt/8/" rel="noreferrer">http://jsfiddle.net/e2yuqtdt/8/</a></p>
  
  <pre><code>html, body {
      min-height:100%;
      height:100%;
  }
  
  .page_login {
      display:flex;
      min-height:100%;
      height:100%;
      width:100%;
      background:#303030;
  }
  
  .page_login &gt; div {
      margin:auto;
      background:#fff;
      height:800px;
      width:200px;
  }
  </code></pre>