title: Vertically center multiple lines of flex items
body: <p>I am trying to vertically align the child DIV of a wrapper but unfortunately not. Requirement is full-width and height of the screen wrapper with two child <code>DIV</code> vertically and horizontally centered. (height of the div is being handled by jQuery to make window height)</p>
  
  <p><strong>Note:</strong> I don't want to make child DIV <code>width:100%</code></p>
  
  <p>This is what I have tried:</p>
  
  <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>.wrapper {
    width: 100%;
    height:100%;
    min-height:600px; /*just for example*/
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    background:#e1e1e1;
  }
  .row1 {
    background: #cdcdcd;
  }
  .row2 {
    background: #404040; color:#fff;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
    &lt;div class="row1"&gt;This is row one&lt;/div&gt;
    &lt;div class="row2"&gt;This is row two&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>