Horizontal und vertikal zentriertes Objekt funktioniert nicht in Firefox?

Question

Ich habe eine , die horizontal und vertikal zentriert ist, und es funktioniert in Chrome und Safari, aber leider nicht in Firefox. In Firefox ist die horizontal, aber nicht vertikal zentriert. Wie behebe ich das? Hat es mit der Jquery-Animation zu tun?

Sie ein Beispiel für meinen Code hier sehen kann: 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

Ich erstelle etwas, das in Firefox funktioniert. Sie können padding-top statt top verwenden:

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">