Center icon over img in Bootstrap

Question

I have a font-awesome icon that stands on top of an img tag, the problem is that it's not centered. And it displays in a different position on every breakpoint in Bootstrap.

How can I absolutely center the icon and keep it at the center no matter what size the screen is?

DEMO https://jsfiddle.net/halnex/ye3ppgej/2/

HTML

<div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'>
  <a class="thumbnail" href="#">
    <i class="fa fa-play-circle-o fa-4x"></i>
    <img class="img-responsive" alt="" src="http://placehold.it/250x180" />
    <div class="caption">The Title</div>
  </a>
</div>

CSS

.thumbnail i {
    top: 50%;
    left: 50%;
    position: absolute;
    margin-left: -25px;
    margin-top: -30px;
}

Answer 1

Put the img and i in an element together, set position: relative on the common parent, then use a combination of position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) to absolutely center the icon

.img {
  position: relative;
}

.img i {
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'>
    <a class="thumbnail" href="#">
      <div class="img">
        <i class="fa fa-play-circle-o fa-4x"></i>
        <img class="img-responsive" alt="" src="http://kenwheeler.github.io/slick/img/fonz1.png" />
      </div>
      <div class="caption">The Title</div>
    </a>
  </div>
  <div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'>
    <a class="thumbnail" href="#">
      <div class="img">
        <i class="fa fa-play-circle-o fa-4x"></i>
        <img class="img-responsive" alt="" src="http://kenwheeler.github.io/slick/img/fonz1.png" />
      </div>
      <div class="caption">The Title</div>
    </a>
  </div>
  <div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'>
    <a class="thumbnail" href="#">
      <div class="img">
        <i class="fa fa-play-circle-o fa-4x"></i>
        <img class="img-responsive" alt="" src="http://kenwheeler.github.io/slick/img/fonz1.png" />
      </div>
      <div class="caption">The Title</div>
    </a>
  </div>
  <div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'>
    <a class="thumbnail" href="#">
      <div class="img">
        <i class="fa fa-play-circle-o fa-4x"></i>
        <img class="img-responsive" alt="" src="http://kenwheeler.github.io/slick/img/fonz1.png" />
      </div>
      <div class="caption">The Title</div>
    </a>
  </div>
  <div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'>
    <a class="thumbnail" href="#">
      <div class="img">
        <i class="fa fa-play-circle-o fa-4x"></i>
        <img class="img-responsive" alt="" src="http://kenwheeler.github.io/slick/img/fonz1.png" />
      </div>
      <div class="caption">The Title</div>
    </a>
  </div>
</div>