title: Vertical align middle and centered text on top of image
body: <p>I am trying to place the text over an image using vertical aligned middle and text align center. But none of them seems working.</p>
  
  <p>My html is </p>
  
  <pre><code>&lt;div class="hero-image"&gt;
    &lt;img src="https://s23.postimg.org/ahcg75tsb/hero.png" alt=""&gt;
    &lt;a href=""&gt;&lt;h2&gt;Some Sample text&lt;/h2&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Demo -- <a href="https://jsfiddle.net/squidraj/zkno1sc2/" rel="nofollow noreferrer">https://jsfiddle.net/squidraj/zkno1sc2/</a></p>
  
  <p>Is it because I am not specifying the width of the image in parent div?</p>
  
  <p>Any help is highly appreciated.</p>