jquery - 水平和垂直居中的对象在Firefox中不起作用？

我有一个水平和垂直居中的<img>，它可以在Chrome和Safari中工作，但不幸的是，它不在Firefox中。在Firefox中，<img>是水平居中的，而不是垂直居中的。我该怎么解决这个问题？它与jquery动画有关吗？
您可以在此处看到我的代码示例：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();
});

最佳答案

我创建了一些可以在Firefox中使用的东西。您可以使用padding-top而不是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">