Horizontally & Vertically Center Text OVER An HTML Image (Absolute Positioning)

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). Here's my solution thus

Solution 1:

You can use transforms

h2 {
  position:absolute;
  top:50%;
  left:50%; 
  text-align:center;
  transform: translateX(-50%) translateY(-50%);
}

And don't forget to clear margins of h2 Here is a working demo

Solution 2:

you could keep using flex for h2 too

.badge-container,
h2 {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.badge-container .badge {
  position: relative;
}
.badge h2 {
  margin: 0;
  position: absolute;
  justify-content: center;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  flex-direction:column;
}
.badge-container h2 strong {} img {
  max-width: 100%;
}

<div class="badge-container">
  <a href="">
    <div class="badge">
      <img src="http://www.placehold.it/400x400/FF9999">
      <h2><strong>Cumberland</strong>County</h2>
    </div>
  </a>

  <a href="">
    <div class="badge">
      <img src="http://www.placehold.it/400x400/99FF99">
      <h2><strong>Dauphin</strong>County</h2>
    </div>
  </a>
  <a href="">
    <div class="badge">
      <img src="http://www.placehold.it/400x400/9999FF">
      <h2><strong>Lancaster</strong>County</h2>
    </div>
  </a>
  <a href="">
    <div class="badge">
      <img src="http://www.placehold.it/400x400/9F9F99">
      <h2><strong>Lebanon</strong>County</h2>
    </div>
  </a>
  <a href="">
    <div class="badge">
      <img src="http://www.placehold.it/400x400">
      <h2><strong>York</strong>County</h2>
    </div>
  </a>
</div>

http://codepen.io/anon/pen/BjYQvv