title: How can I vertically center text over a responsive image?
body: <p>How can I get the caption text on these images to move around when then the browser window is resized? My implementation is jicky and I need a way to keep the text from sliding around when the window is resized. </p>
  
  <p><a href="http://codepen.io/anon/pen/mxbEd" rel="noreferrer">Codepen</a></p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;div class="col-md-6"&gt;
      &lt;img src="http://placekitten.com/600/375" class="img-responsive" /&gt;
      &lt;h2 class="homeImageLink"&gt;
        &lt;span&gt;Caption Text&lt;/span&gt;
      &lt;/h2&gt;
    &lt;/div&gt;
    &lt;div class="col-md-6"&gt;
      &lt;img src="http://placekitten.com/600/375" class="img-responsive" /&gt;
      &lt;h2 class="homeImageLink"&gt;
        &lt;span&gt;Caption Text&lt;/span&gt;
      &lt;/h2&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  .homeImageLink {
     position: absolute; 
     top: 110px; 
     left: 0;
     text-align: center; 
     width: 100%; 
  }
  
  .homeImageLink span { 
      color: red;
      font-weight: 300;
      font-style: italic;
      text-transform: uppercase;
      letter-spacing: 15px;
      pointer-events: none;
  }
  </code></pre>