title: How can I use a CSS transform to vertically-center two overlapping elements?
body: <p>I have a relatively-positioned div wrapper, and I want to vertically-align a div inside of it.  Various other Stack answers seem to suggest this is the right way to do this:</p>
  
  <pre><code>.vcenter {position: relative; top: 50%; transform: translateY(-50%); }
  </code></pre>
  
  <p>That works great, but only for a single child element.  I want to have two overlapping child divs, a picture and some text, both vertically-centered within the wrapper div:</p>
  
  <pre><code>&lt;div class="wrap"&gt;
    &lt;div class="foo vcenter"&gt;&lt;/div&gt;
    &lt;div class="bar vcenter"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This doesn't work - the transform applies to both children, but the second child is offset vertically by the height of the first child.  </p>
  
  <p>I made a simple <a href="http://jsfiddle.net/eLm3h1o8/1/" rel="nofollow" title="JSFiddle link">jsfiddle</a> that may make this clearer.</p>
  
  <p>Is there a way to get both elements to each center as if they were the only child? </p>
  
  <p>(PS - don't tell me to replace them with a single div containing the text and the image as a background, they need to move independent of each other)</p>