相对和绝对; 响应中心定位？bootstrap css

Question

所以我正在创建一个带引导程序的图像库,并希望在悬停在图像中心时显示文本.因此水平和垂直都定位了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元素定位'relative'然后给h2定位绝对,顶部和左边50%然而它似乎根本不居中它并且位于靠近右下角图片.

问题是我做错了什么,跳到了任何人身上？如果没有,我可以上传网络文件,并提供一个链接,以显示它是如何工作或实际上是否有一个更简单或替代方法来实现这一目标？

Answer 1

您应该需要的是以下内容:

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

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