将div向上移动其自身高度的50％

Question

TL; DR：您可以将div向上移动其自身高度的50％，而其余文档流仍在其正下方吗？

我必须进行布局，在其中有一系列带有标题（文本的长度可变）的图像（固定的宽度：高度比）。

我很确定我必须使用flex或grid。以下是指向具有display: flex个子级的display: flex||grid容器的约束：

即使屏幕宽度可能有所不同，每行的项目数仍已固定
即使同一行的标题长度可变，包含同一行标题文本的框也应具有相同的高度。
[如果一行中没有图像，则应将居中的图像减少（即，父级不能为grid。]

这里是踢脚：

标题应垂直于各自图像的底部居中。（与下面的代码段完全相同，当启用transform时。）

为什么translateY无法工作：使用translateY(-50%)可以轻松做到这一点（请参见下面的代码段），但是我对两行图像之间的垂直间距没有任何控制。如果由于标题长度的变化而导致标题行的高度为100像素，那么我将在该行下方添加50像素的边距，如果下一行的标题框只有80像素高，则该标题框的下方的边距将为40像素。 ..我正在尝试在每一行下方获得一致的边距。

代码段：布局正确。当translateY为启用时，字幕相对于其各自的图像正确放置。当translateY为[[disabled]]时，可以确定图像行之间的垂直间距。我希望两者都做。

body {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
section {
    box-sizing: border-box;
    width: calc(100% / 3);
    display: flex;
    flex-direction: column;
}
.img {
    background: center / cover no-repeat url(https://cdn.pixabay.com/photo/2020/02/16/20/29/new-york-4854718_1280.jpg)
}
.img::before {
    content: '';
    display: block;
    padding-bottom: 65%;
}
.text {
    background-color: rgba(255, 255, 255, .8);
    box-shadow: inset 0 0 0 1px red;
    flex: 1;
    transform: translateY(-50%);
}

<section>
    <div class="img"></div>
    <div class="text"><span>Convallis cursus ornare mus luctus varius fusce tempus arcu quisque</span></div>
</section>
<section>
    <div class="img"></div>
    <div class="text"><span>Eleifend lorem facilisis dictumst phasellus aenean conubia libero.</span></div>
</section>
<section>
    <div class="img"></div>
    <div class="text"><span>Nam ut gravida nisi scelerisque</span></div>
</section>
<section>
    <div class="img"></div>
    <div class="text"><span>Ligula quisque nibh class sociosqu netus laoreet interdum volutpat mus</span></div>
</section>
<section>
    <div class="img"></div>
    <div class="text"><span>Duis nec maecenas ultricies ridiculus nascetur nisi rutrum dignissim nam</span></div>
</section>

TL; DR：您可以将div向上移动其自身高度的50％，而其余文档流仍在其正下方吗？我必须进行布局以放置一系列图像（固定的宽度：高度比）...