在正中间重叠高度未知的 div

Question

我有两个 div（附图中的红色和绿色矩形）。红色 div 的高度和宽度已知，绿色 div 的高度和宽度未知。

我希望它们重叠，但有一个扭曲：正好一半的绿色 div 应该位于红色 div 的顶部，另一半应该挂在外面。

是否可以仅使用 CSS？我在 css 方面很差，只有当我通过设置

知道绿色 div 高度（比如 90px）时，我才设法重叠它们

position: relative;
top: -45px;

但由于动态 div 内部内容，这次身高未知。

Answer 1

是的，你可以：

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