title: How do I "vertically center" two flex items?
body: <p>Here is the <a href="http://codepen.io/Hello911/pen/bgdBKg?editors=1100" rel="nofollow noreferrer">link</a> to my project.</p>
  
  <p>I want both of them to be "centered" so to speak. But yes, I know they can both take up 1 position. So I think if there is a way to draw a (invisible) horizontal line that is vertically centered. Then, I can just place one flex item right on top of this line, and the other right below it. </p>
  
  <p>But I think there is a better way to do this that can be used to centered more than 2 flex items.
  <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:#4A6556;
    
  }
  
  
  body&gt;div&gt;hello,hey{
    background: #CCC;
    border-radius: 7px;
    margin: 5px;
    padding: 20px;
  }
  
  body&gt;div{
    display: flex;
    flex: row wrap;
    flex-direction: column;
  }
  
  body&gt;div&gt;hey{
    order:2;
    
    font-family: 'Lato', sans-serif;
    color:#212121;
    
  }
  body&gt;div&gt;hello{
    order:1;
    
    font-family: 'Kumar One', cursive;
    color: #938653;
  }
  
  hello,
  hey{
    text-align: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://fonts.googleapis.com/css?family=Kumar+One" rel="stylesheet"&gt;
  &lt;link href="https://fonts.googleapis.com/css?family=Kumar+One|Lato" rel="stylesheet"&gt;
  
  &lt;body&gt;
    &lt;div&gt;
  &lt;hello&gt;Welcome!&lt;/hello&gt;
  &lt;hey&gt;This is my portfolio page.&lt;/hey&gt;
     &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>