title: relative and absolute; responsive center positioning? bootstrap css
body: <p>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.</p>
  
  <p>Here is the code I am using: `</p>
  
  <pre><code> &lt;div class="col-lg-3 col-md-4 col-xs-6 thumb text-center"&gt;
       &lt;a class="thumbnail" href="#"&gt;
           &lt;img class="img-responsive" src="images/girl.jpg" alt=""&gt;
           &lt;h2&gt; Text &lt;/h2&gt;
       &lt;/a&gt;
   &lt;/div&gt;`
  </code></pre>
  
  <p>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.</p>
  
  <p>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?</p>