html - 相对的和绝对的；响应中心定位？ Bootstrap 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%，但它似乎根本没有居中并且位于右下角附近图片的一 Angular 。

问题是我做错了什么会跳到任何人面前吗？如果没有，我可以上传网络文件并提供一个链接来说明它是如何不起作用的，或者实际上是否有更简单或替代的方法来实现这一点？

Answer 1

您只需要以下内容:

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

.thumbnail将拉伸(stretch)以包含图像和 <h2>将在其中垂直和水平居中。