title: Flex items not centering vertically
body: <p>I'm trying to center vertically the content with flex boxes without success. I don't like to use <code>position</code> or <code>translate</code> because it is not a fixed size. What is wrong with my code?</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>.row-centered {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
  }
  
  .col-centered {
      display: flex;
      flex-direction: column;
      align-self: flex-start;
      float: none;
      margin-right: 0 auto;
  }
  
  .us-container{
    display: flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    resize: both;
    overflow: auto;
  }
  
  .us-container div{
    resize: both;
    overflow: auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
  
  &lt;section id="us" class="container-fluid"&gt;
          &lt;div class="row row-centered  us-container"&gt;
              &lt;div class="col-sm-8 col-md-8 col-xs-8 col-centered "&gt;
                  &lt;p class="text-justify"&gt;blah blah blah blah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blah &lt;/p&gt;
                  &lt;h3 class="text-center"&gt;blah blah blah&lt;/h3&gt;
              &lt;/div&gt;
              &lt;/div&gt;
      &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>