title: How to vertically align to a container whose height depends on a sibling?
body: <pre><code>&lt;div id=&quot;wrapper&quot;&gt;
     &lt;div id=&quot;overlay&quot;&gt;
        This is full width/height and absolutely positioned
     &lt;/div&gt;
     &lt;div id=&quot;content&quot;&gt;
        This should be the size of #overlay MINUS the size of #second-element
     &lt;/div&gt;
     &lt;div id=&quot;footer&quot;&gt;
        This has a variable height based on its own content
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p><code>#content</code> can be easily aligned to the <code>#wrapper</code> with</p>
  <pre><code>    position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  </code></pre>
  <p>However, is there a way to align it to <code>#content</code>? (Since its height depends on the variable <code>#footer</code>'s height)</p>
  <p>Note: <code>#footer</code> MUST stick to the bottom of <code>#wrapper</code>, and it should not add additional space.</p>