title: Horizontally and vertically centered object doesn't work in Firefox?
body: <p>I have an <code>&lt;img&gt;</code> which is centred horizontally and vertically, and it works in Chrome and Safari but unfortunately not in Firefox. In Firefox the <code>&lt;img&gt;</code> is centred horizontally but not vertically. How do I fix this? Does it have to do with the jquery animation? </p>
  
  <p>You can see an example of my code here: <a href="http://jsfiddle.net/amagdk/kan94az0/" rel="nofollow">http://jsfiddle.net/amagdk/kan94az0/</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;img src="hover-kitty.png" alt="Hover Kitty"&gt;
  </code></pre>
  
  <p><strong>CSS</strong>   </p>
  
  <pre><code>img {
      position: absolute;
      margin: auto;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
  }
  </code></pre>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>$(document).ready(function(){
  var hoverkitty = $("img");
     function hover() {
         hoverkitty.animate({top:'+=20'}, 1000);
         hoverkitty.animate({top:'-=20'}, 1000, hover);
     }
     hover();
  });
  </code></pre>