Html 将多行文字垂直居中放置在图像上 我试图得到一些字幕文本，以便垂直放置在图像的中间。我用表格单元格尝试了一整套不同的技术，但似乎无法使其工作

我有一个

和一个嵌套的

我所在的位置。有人能提出解决方案吗？
这是一个带有
位置的选项：绝对
和Flexbox


ul{
列表样式类型：无；
填充：0；
}
a{
位置：相对位置；
显示：内联块；
}
.标题包装{
位置：绝对位置；
背景：rgba（255，255，255，0.6）；
显示器：flex；
排名：0；
左：0；
身高：100%；
宽度：100%；
对齐项目：居中；
证明内容：中心；
字体大小：35px；
文本对齐：居中；
}



创建了一个

将以下css添加到
.caption wrapper
：

top: 50%;
transform: translateY(-50%);
-webkit-transorm: translateY(-50%); /* for Chrome */
position: absolute;
left: 0;
display: inline-block;

另外，使用display table:，使用translateY:我认为translateY是最好的解决方案，因为您不需要知道img的尺寸。这是一把经过更新和清理的小提琴，它展示了：太棒了！谢谢塔伦。松了一口气，很高兴又向前走了……：-）另外，还有一个漂亮的fiddle和tidy实现@powerbuoy。干杯，谢谢你的建议。我想我会同意塔伦的建议，因为我想最大限度地提高浏览器的兼容性，据我所知IE8/9不支持flexbox。我当然对flexbox感兴趣，所以我可能会对它有更多的了解。再次感谢。