Horizontally & Vertically Center Text OVER an HTML Image (Absolute Positioning)
<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>