相对和绝对；响应式中心定位？引导css

Question

因此，我正在创建一个带有bootstrap的图片库，并希望在悬停时在图像的中心显示文本。因此，水平和垂直放置图像的50% (因此它是响应性的)。目前，我只是试图让文本正确地显示在图像的顶部，但似乎有问题。

下面是我使用的代码：`

 <div class="col-lg-3 col-md-4 col-xs-6 thumb text-center">
     <a class="thumbnail" href="#">
         <img class="img-responsive" src="images/girl.jpg" alt="">
         <h2> Text </h2>
     </a>
 </div>`

所以我试着给div，a和img元素定位‘相对’，然后给h2定位绝对的，顶部和左边的50%，但是它似乎根本没有居中，并且定位在图像的右下角附近。

问题是，我是不是做错了什么？如果没有，我可以上传web文件，并提供一个链接来显示它是如何不工作的，或者实际上有没有更容易的或替代的方法来实现这一点？

Answer 1

你需要做的就是：

.thumbnail {
    display: block;
    position: relative;
}
.thumbnail h2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.thumbnail将拉伸以包含图像，并且<h2>将在其中垂直和水平居中。