title: Center a Font Awesome icon over the image on hover
body: <p>I'm trying to center a font awesome icon over an image when the mouse is hovering the image.
  Here's my HTML:</p>
  
  <pre><code>&lt;div class="profile-img-container"&gt;
      &lt;img src="http://s3.amazonaws.com/37assets/svn/765-default-avatar.png" class="img-thumbnail img-circle img-responsive" /&gt;
      &lt;i class="fa fa-upload fa-5x"&gt;&lt;/i&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And my CSS:</p>
  
  <pre><code>.profile-img-container {
      position: relative;
  }
  
  .profile-img-container img:hover {
      opacity: 0.5;
  }
  
  .profile-img-container img:hover + i {
      display: block;
      z-index: 500;
  }
  
  .profile-img-container i {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      margin: auto;
  }
  </code></pre>
  
  <p>However the font awesome icon is somewhy displayed all the way to the left and the icon keeps flickering when I hover the image.
  Here's my JSFiddle:
  <a href="http://jsfiddle.net/fns8byfj/1/" rel="noreferrer">http://jsfiddle.net/fns8byfj/1/</a></p>