Does a horizontally and vertically centered object not work in Firefox?

Question

I have an <img> that is horizontal and vertical, and works in Chrome and Safari, but unfortunately not in Firefox. In Firefox, the <img> centered horizontally, but not vertically. How to fix it? Is this related to jquery animation?

Here you can see an example of my code: http://jsfiddle.net/amagdk/kan94az0/

HTML

 <img src="hover-kitty.png" alt="Hover Kitty"> 

CSS

 img { position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; } 

JQuery

 $(document).ready(function(){ var hoverkitty = $("img"); function hover() { hoverkitty.animate({top:'+=20'}, 1000); hoverkitty.animate({top:'-=20'}, 1000, hover); } hover(); }); 

Answer 1

I am creating something that will work in firefox. You can use padding-top instead of top :

 var hoverkitty = $("img"); function hover() { hoverkitty.animate({ 'padding-top': '+=20' }, 1000); hoverkitty.animate({ 'padding-top': '-=20' }, 1000, hover); } hover(); 

 img { position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img src="http://itu.dk/people/akam/ta_challenge/hover-kitty.png" alt="Hover Kitty">