title: Horizontally & Vertically Center Text OVER an HTML Image (Absolute Positioning)
body: <p>Given the following design element, I'm attempting to include the images in html so that the opacity can be manipulated with css transitions (hover effect).</p>
  
  <p>Here's my solution thus far: <a href="http://codepen.io/roachdesign/pen/VeQKJK/" rel="nofollow noreferrer">http://codepen.io/roachdesign/pen/VeQKJK/</a></p>
  
  <p>The major drawback here is that I'm using a manual vertical centering (absolute / top:40%), which becomes apparent when shrinking the browser.</p>
  
  <p>Is is possible to apply vertical centering with flexbox or tables when working with absolute positioning?</p>
  
  <p><a href="https://i.stack.imgur.com/bQDmE.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bQDmE.jpg" alt="County Badges"></a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="badge-container"&gt;
    &lt;a href=""&gt;
      &lt;div class="badge"&gt;
          &lt;img src="http://www.placehold.it/400x400/FF9999"&gt;
          &lt;h2&gt;&lt;strong&gt;Cumberland&lt;/strong&gt;County&lt;/h2&gt;
      &lt;/div&gt;
    &lt;/a&gt;
    &lt;a href=""&gt;
      &lt;div class="badge"&gt;
          &lt;img src="http://www.placehold.it/400x400/99FF99"&gt;
          &lt;h2&gt;&lt;strong&gt;Dauphin&lt;/strong&gt;County&lt;/h2&gt;
      &lt;/div&gt;
    &lt;/a&gt;
    &lt;a href=""&gt;
      &lt;div class="badge"&gt;
          &lt;img src="http://www.placehold.it/400x400/9999FF"&gt;
          &lt;h2&gt;&lt;strong&gt;Lancaster&lt;/strong&gt;County&lt;/h2&gt;
      &lt;/div&gt;
    &lt;/a&gt;
    &lt;a href=""&gt;
      &lt;div class="badge"&gt;
          &lt;img src="http://www.placehold.it/400x400/9F9F99"&gt;
          &lt;h2&gt;&lt;strong&gt;Lebanon&lt;/strong&gt;County&lt;/h2&gt;
      &lt;/div&gt;
    &lt;/a&gt;
    &lt;a href=""&gt;
      &lt;div class="badge"&gt;
          &lt;img src="http://www.placehold.it/400x400"&gt;
          &lt;h2&gt;&lt;strong&gt;York&lt;/strong&gt;County&lt;/h2&gt;
      &lt;/div&gt;
    &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>SCSS</p>
  
  <pre><code>.badge-container {display:flex; flex-direction:row; 
    .badge {position:relative;}
    h2 {position:absolute;
        top:36%;
        left:0; 
        right:0;
        text-align:center;
        strong {display:block;}
    }
  }
  
  img {max-width:100%;}
  </code></pre>