使用 Display:Table Cell 对图像进行标题答案

【问题标题】：Title over an image using Display:Table Cell使用 Display:Table Cell 对图像进行标题
【发布时间】：2015-10-04 01:44:11
【问题描述】：

我正在尝试让标题显示在图像上，并使用 display:table-cell 使其水平和垂直居中。

一个具体的例子是http://ollymoss.com - 在悬停时，每张海报的标题如何出现并垂直/水平居中。我检查了元素并看到他们正在使用 Display: Table-cell 但我无法复制它。

如果有人碰巧知道一种方法来完成这项工作，那就太好了！

这是有问题的页面：http://sathyaram.com/graphic

我正在尝试让每个图块的标题显示在图块上，垂直/水平居中。

如果有比 display:table-cell 更好的方法，我很想知道！我知道您可以使用 position:absolutes/relatives，但我希望它具有响应性，但我不确定它是如何工作的！

我正在尝试专门在 CSS 中执行此操作 - 不知道如何使用 jQuery！

非常感谢！

【问题讨论】：

您应该在问题中包含minimal reproducible example；简单地链接到场外代码，尤其是您打算更改的网站，对将来的任何人都没有帮助。

标签： image css text tablecell

【解决方案1】：

如果你想显示标题水平和垂直居中，你可以在 css 中进行我认为：

.yourTitleWrap {
    text-align: center;
    width: 100%;
    height: 50px /* with 50px for example ... */
    position: absolute;
    top: calc(50% - 25px);
}

对于顶部值，25px 表示高度 / 2，通常它应该可以工作并将您的标题居中在父 div 的中心。

【讨论】：