title: CSS Flex Box: How to vertically align "flex items" to middle without losing flex item height?
body: <p>Currently my "flex" items look like this (vertically aligned: top)...</p>
  
  <pre><code> _____________________________________
     1
  
   _____________________________________
     2
  
   _____________________________________
     3
  
   _____________________________________
     4
  
   _____________________________________
  </code></pre>
  
  <p><br>
  <br>
  My Goal is to make them look like this (vertically aligned: middle)...</p>
  
  <pre><code> _____________________________________
  
     1
   _____________________________________
  
     2
   _____________________________________
  
     3
   _____________________________________
  
     4
   _____________________________________
  </code></pre>
  
  <p><br></p>
  
  <h2>My requirements:</h2>
  
  <ul>
  <li>The flex container must stay at 100% in height</li>
  <li>The flex items must stay 25% in height (equaling 100%, which is its default anyway).</li>
  <li>The flex items must be vertically centered.</li>
  <li>This must be responsive and be smart enough to stay in the middle per device (so no line-height/padding)</li>
  </ul>
  
  <p><a href="http://jsfiddle.net/oneeezy/p4XtA/" rel="noreferrer">http://jsfiddle.net/oneeezy/p4XtA/</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;!-- Flex Box --&gt;
  &lt;section&gt;
  
      &lt;!-- Flex Items --&gt;
      &lt;div&gt;1&lt;/div&gt;
      &lt;div&gt;2&lt;/div&gt;
      &lt;div&gt;3&lt;/div&gt;
      &lt;div&gt;4&lt;/div&gt;
  
  &lt;/section&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>/* Flex Box */
  section { padding: 1em; background: black; display: flex; flex-flow: column; height: 100%; justify-content: space-around; }
  
  /* Flex Items */
  div { border-top: 1px solid #ccc; background: #f2f2f2; height: 25%; }
  div:first-child { border-top: 1px solid transparent; }
  div:hover { background: white; }
  </code></pre>