title: Vertically center inside a `flex-grow: 1`
body: <p>say I have HTML as</p>
  
  <pre><code>&lt;div class="page"&gt;
    &lt;div class="header"&gt;&lt;/div&gt;
    &lt;div class="content"&gt;
      &lt;div class="foo"&gt;
        &lt;div&gt;I want to be center of content&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="footer"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>html, body {
    height: 100%;
  }
  body {
    margin: 0;
  }
  
  .page {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .header {
    flex-shrink: 0;
    background-color: green;
    height: 50px;
  }
  .content {
    flex-grow: 1;
  }
  .footer {
    flex-shrink: 0;
    background-color: steelblue;
    height: 150px;
  }
  
  .foo {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  </code></pre>
  
  <p><a href="https://codepen.io/rrag/pen/PRmOYe" rel="nofollow noreferrer">https://codepen.io/rrag/pen/PRmOYe</a></p>
  
  <p>I achieved a sticky footer at the bottom of the page
  using <code>flex-grow</code> but that leads to a content with unknown height</p>
  
  <p>How do I center something in the middle of <code>content</code>?
  Is it possible using flexbox or may be an alternative approach?</p>