title: How to center absolute div (text) above relative div (image) responsively?
body: <p>I'm building a template with Twitter Bootstrap and trying to get a text centered horizontally and vertically above a image, for example:<br><br>
  <img src="https://i.stack.imgur.com/iXFQY.jpg" alt="enter image description here">
  <br><br>
  I'm trying with this:</p>
  
  <pre><code>&lt;div class="container"&gt; &lt;!--Bootstrap--&gt;
    &lt;div class="row"&gt; &lt;!--Bootstrap--&gt;
      &lt;div class="col-md-4"&gt; &lt;!--Bootstrap--&gt;
  
          &lt;div class="box"&gt;
             &lt;div class="thumb"&gt;&lt;img src="..."&gt;&lt;/div&gt;
             &lt;div class="title"&gt;Post title&lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt; &lt;!--Bootstrap--&gt;
    &lt;/div&gt; &lt;!--Bootstrap--&gt;
  &lt;/div&gt; &lt;!--Bootstrap--&gt;
  
  .box {height:350px; width:100%; border:4px solid #fff;}
  .thumb {position:relative; width:100%; height:100%; overflow: hidden;}
  .thumb img{width:100%; height:100%; overflow: hidden;}
  .title {position:absolute;}
  </code></pre>
  
  <p>With this, if I use some value to <strong><em>top</em></strong> to the div <strong><em>title</em></strong> it appears above the img, but I can't get to center it neither horizontally or vertically.</p>
  
  <p>It doesn't work either with all I searched until now: <strong><em>left:50%</em></strong>, <strong><em>left:0</em></strong> and <strong><em>right:0</em></strong>; <strong><em>margin:auto</em></strong>, etc...</p>
  
  <p>Also I'm not looking for to use the img as a css background.</p>
  
  <p>How can I get this right?</p>