title: Vertically center text inside a div
body: <p>I'm trying to vertically center some text inside a div. Sounds easy but I can't get it. Here's the code, sorry for the bad formatting and practices, it's something whipped up fast and dirty:</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-html lang-html prettyprint-override"><code>&lt;div id="container" style="text-align:center ;border: 5px solid blue; display:flex; flex-direction:row ; justify-content:center; height:100px"&gt;
    &lt;div id="first" style=" min-height:100px; min-width:200px; background-color:green"&gt;
      &lt;div style="vertical-align:middle"&gt;
        first box
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="second" style=" min-height:100px; min-width:200px;  background-color:yellow"&gt;
      &lt;div style="vertical-align:middle"&gt;
        second box
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;svg version="1.1" id="SVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 300 300" preserveAspectRatio="xMidYMid meet" height="100%" width: "auto"&gt;
       &lt;!--snipped away svg code--&gt;
  
   &lt;/svg&gt;
    &lt;div id="third" style="min-height:100px; min-width:200px; background-color:red"&gt;
      &lt;div style=""&gt;
        third box
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="fourth" style="min-height:100px; min-width:200px; background-color:cyan; vertical-align:middle "&gt;
      &lt;p&gt;
        fourth box
      &lt;/p&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As you can see, there's four boxes around a central svg image. Horizontally centering the elements inside the "container" div was easy, vertically centering the text inside each of those elements is not. Not at all.</p>
  
  <p>I've tried various solutions, none of which worked like intended (the text just goes up to the top of the box). Am I missing something obvious or am I trying to do something impossible? </p>
  
  <p>I'm looking for a flexible solution, something that can work without knowing the exact height in pixels of the boxes nor the container.</p>