在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();
});

- AnnaM

---

看起来如果你注释掉//hover()，图片就会居中，所以这似乎是一个问题。你增加值的原因是什么？http://jsfiddle.net/kan94az0/39/ - Christopher Marshall

啊哈，那我就更不知道该如何修复了。 - AnnaM

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

- Alex Char

---

太棒了！谢谢 Alex！ - AnnaM