title: How to vertically center div relative to flexbox grandparent?
body: <p>Given a div with display flexbox <code>.wrapper</code> (run and see snippet below) and a deeply nested div <code>.text-container</code>, how can I center the deeply nested div relative to the <code>.wrapper</code> and not relative to its parent <code>.variable-height</code>? </p>
  
  <p>In the snippet below there are two columns with equal height and I want the text, which is placed in a variable height div inside each column, to be at the same level. I have set the display of the variable height div also to <code>flexbox</code>, so logically the text is centered, relative to it and not to the grandparent <code>.wrapper</code>, which is not what I want.</p>
  
  <p>The only solution I came up with is to set <code>position: relative;</code> on <code>.wrapper</code> and on <code>.text-container</code>:</p>
  
  <pre><code>position: absolute;
  top: 50%;
  transform: translateY(-50%);
  </code></pre>
  
  <p>However, I am not sure, if it's a good idea to mix flexbox and absolute/relative positioning.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.wrapper {
    background-color: white;
    min-height: 200px;
    width: 200px;
    float: left;
    margin-left: 50px;
    display: flex;
    flex-direction: column;
  }
  
  .wrapper .fixed-height {
    background-color: orange;
    min-height: 30px;
  }
  
  .wrapper .second {
    background-color: yellow;
    min-height: 30px;
  }
  
  .wrapper .variable-height {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  .wrapper .variable-height .text-container {
    width: 100%;
    text-align: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
    &lt;div class="fixed-height"&gt;&lt;/div&gt;
    &lt;div class="fixed-height second"&gt;&lt;/div&gt;
    &lt;div class="variable-height"&gt;
      &lt;div class="text-container"&gt;
        &lt;div class="title"&gt;Title&lt;/div&gt;
        &lt;div class="subtitle"&gt;Subtitle&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="fixed-height"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="wrapper"&gt;
    &lt;div class="fixed-height"&gt;&lt;/div&gt;
    &lt;div class="variable-height"&gt;
      &lt;div class="text-container"&gt;
        &lt;div class="title"&gt;Title&lt;/div&gt;
        &lt;div class="subtitle"&gt;Subtitle&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="fixed-height"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>