title: center two child elements vertically in flexbox
body: <p>I need your help, I try to center the text into her div verticaly, but I try all but it do not run. I share with you the default pattern.</p>
  
  <p>The ultimate solution is to use padding, but I think can succeed with flexbox. I don't know, i'm blocked</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>body {
      background: #2F546B;
      margin: 0;
      font-family: 'Roboto', sans-serif;
  }
  
  #current {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  }
  
  .current_details {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      width: 200px;
      height: 300px;
      margin: 5px 5px;
      text-align: center;
      border: 2px solid red;
  }
  
  .current_details div {
      font-size: 2em;
      border: 2px solid #fdfefe;
  }
  
  .current_details div:nth-child(1) {
      -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1;
  }
  
  .current_details div:nth-child(2) {
      color: #000;
      background: #fdfefe;
      -webkit-box-flex: 2;
          -ms-flex: 2;
              flex: 2;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="current"&gt;
      &lt;a ng-repeat="(key, value) in vm.currentQuotes" ng-href="#!/current/{{key}}"&gt;
          &lt;div class="current_details"&gt;
              &lt;div&gt;AUD&lt;/div&gt;
              &lt;div&gt;1.5045&lt;/div&gt;
          &lt;/div&gt;
      &lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>