Html 将标题垂直居中悬停

是否可以使用以下代码将标题垂直居中悬停？我知道我可以在figcaption标记周围添加一个div来进行覆盖，但我想知道是否可以在不添加更多HTML代码的情况下进行同样的操作

HTML:

---

提前感谢

您可以在

上使用Flexbox。字幕文本

。标题{
位置：相对位置；
显示：内联块；
}
.标题img{
显示：块；
保证金：0；
}
.标题文字{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
颜色：#fff；
显示器：flex；
对齐项目：居中；
证明内容：中心；
不透明度：0；
过渡：所有0.3秒都容易进入；
}
.caption:hover.caption文本{
背景：rgba（30,30,30,0.7）；
不透明度：1；
}

一些文本

<figure class="caption">
    <img src="image.jpg" alt="" />
    <figcaption class="caption-text">Some text</figcaption>
</figure>

.caption {
    position: relative;
}

.caption img {
    display: block;
    margin: 0;
}

.caption-text {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    text-align: center;
}

.caption:hover .caption-text {
    display: block;
    background: rgba(30, 30, 30, 0.7);
}