relative and absolute; responsive center positioning? bootstrap css

Question

So I'm creating an image gallery with bootstrap and would like to have text show on the center of the images on hover over. So both horizontally and vertically positioned 50% of the image(so it is responsive). At the moment I'm just trying to get the text to display on top of the image correctly but seem to be having problems.

Here is the code I am using: `

 <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>`

So I have tried giving the div, a and img elements positioning of 'relative' and then giving h2 positioning of absolute, top and left 50% however it seems to not center it at all and is positioned near to the bottom right corner of the image.

Question is am I doing something wrong that jumps out to anyone? If not I can upload the web files and provide a link to show how it is not working or is there actually an easier or alternative method to achieve this?

Answer 1

All you should need is the following:

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

.thumbnail will stretch to contain the image and the <h2> will be centered vertically and horizontally within it.