css position - How can I use a CSS transform to vertically-center two overlapping elements? -

i have relatively-positioned div wrapper, , want vertically-align div inside of it. various other stack answers seem suggest right way this:

.vcenter {position: relative; top: 50%; transform: translatey(-50%); }

that works great, single child element. want have 2 overlapping child divs, picture , text, both vertically-centered within wrapper div:

<div class="wrap">   <div class="foo vcenter"></div>   <div class="bar vcenter"></div> </div>

this doesn't work - transform applies both children, second child offset vertically height of first child.

i made simple jsfiddle may make clearer.

is there way both elements each center if child?

(ps - don't tell me replace them single div containing text , image background, need move independent of each other)

you should use position absolute instead of relative:

.vcenter {     position: absolute;      top: 50%;      left: 50%;      transform: translate(-50%, -50%);  }

Current CAD