Overlap a div with unknown height exactly in the middle

Question

I have two divs (red and green rectangles in the attached image). Height and width of the red div are known and height and width of the green div are not known.

I want them to overlap but with a twist: exactly one half of the green div should lie on top of the red div and another half should hang outside.

Is it possible to do with CSS only? I am quite poor with css and I managed to overlap them only when I know the green div height (say, 90px) by setting

position: relative;
top: -45px;

but this time height is not know because of dynamic div internal content.

Answer 1

Yes you can:

position: relative;
transform: translateY(-50%);