使用Display：Table Cell在图像上的标题

Question

我试图获得一个标题显示在图像上，并使用display：table-cell将其水平和垂直居中。

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

如果有人碰巧知道如何使这项工作，那就太棒了！

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

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

如果有比显示更好的方法：table-cell，我很想知道！我知道你可以使用职位：绝对/亲戚，但我希望它能够做出回应，而且我不确定它是如何运作的！

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

非常感谢！

Answer 1

如果你想显示水平和垂直居中的标题，你可以用css来表达：

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

对于最高值，25px表示高度/ 2，通常它应该工作并将标题置于父级div的中心。