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

【问题标题】：Horizontally and vertically centered object doesn't work in Firefox?水平和垂直居中的对象在 Firefox 中不起作用？
【发布时间】：2014-12-11 01:47:10
【问题描述】：

我有一个水平和垂直居中的<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();
});

【问题讨论】：

看起来如果你注释掉 //hover() 图像中心，所以这似乎是一个问题。你增加值有什么原因吗？ jsfiddle.net/kan94az0/39
啊哈，呃，那我就更无能为力了。

标签： jquery html css firefox css-position

【解决方案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">

【讨论】：

太棒了！谢谢亚历克斯！