Obiekt wyśrodkowany poziomo i pionowo nie działa w przeglądarce Firefox?

Question

Mam <img>, który jest wyśrodkowany poziomo i pionowo, i działa w przeglądarce Chrome i Safari, ale niestety nie w Firefoksie. W przeglądarce Firefox <img> jest wyśrodkowany poziomo, ale nie pionowo. Jak to naprawić? Czy ma to związek z animacją jquery?

można zobaczyć przykład mojego kodu tutaj: 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

Tworzę coś, co zadziała w firefoxie. Można użyć padding-top zamiast 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">