javascript - 响应式 div 中的绝对垂直和水平居中文本

Question

我真的无法解决这个问题 - 我正在尝试在悬停时显示在图像上的响应式 div 中垂直和水平文本。

这是一个 jsfiddle基本的 HTML 和 CSS 结构。

Here's an example of what I'm attempting to do.

我已经尝试了很多不同的 CSS 方法 - 使用 table(这是行不通的，因为我使用 absolute 将文本放在图像上方，transform: translate(-50%, -50%); top: 50%; left: 50%; 偏移了文本，还有其他我现在不记得的。

主要问题是我有两个“层”——文本和它下面的图像。为此，我需要使用 absolute，这会导致 table 选项不起作用。

如果您有任何建议，我将不胜感激。

注意:我使用的图像必须保持 16:9 的纵横比。

谢谢!

Answer 1

我有一个工作示例:https://jsfiddle.net/v1harbqm/7/

我基于@gopalraju 的 fiddle 。它在 Safari 中不起作用，而是 display: table; 的组合并为标题添加高度。

编辑:创建了一个<span>在标题中使其适用于更长的文本。这次使用翻译，看起来 Safari 仍然需要 -webkit- 前缀，所以这可能是最初的问题。

无论如何，这是更新的:https://jsfiddle.net/v1harbqm/13/