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

Question

我有一个 <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();
});

Answer 1

我创建了一些可以在 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">