javascript - 可以居中吗？

Question

编辑:我用这个解决了它:(感谢所有回答的人)

var intDuration = 50;
setInterval(
function(){
   $('#image').animate({"margin-left": "-=0.05%", "margin-top": "-=0.05%", "width": "+=0.1%"}, 'slow');
}, 
intDuration
);

所以我有一个每 50 毫秒增加 0.1% 宽度的 JavaScript，唯一的问题是它在几秒钟后变得不居中(因为它正在增加宽度)。有没有通过 javascript/css 解决这个问题的方法？
这是 JavaScript:

    var intDuration = 50;
    setInterval(
       function(){
           $('#image').animate({"width": "+=0.1%"},'slow');
    }, 
       intDuration
    );  

这是我的 CSS:(抱歉，如果它的格式很糟糕或者很多东西都是多余的)

.image {
text-align: center;
vertical-align: middle;
background: #000;
}

.image img {
width: 1%;
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -20px;
}  

这是我的 HTML:

    <div class="image">
 <image src="image.png" id='image'/>

JSFiddler: http://jsfiddle.net/Zane_/eERUA/

Answer 1

试试这个

http://jsfiddle.net/4GrQk/2/

    .image img {
    width: 1%;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -0.5%;
    } 

    var intDuration = 50;
setInterval(

function () {
    var w = $('#image').width();
    var m = w/2;
    $('#image').animate({
        "width": "+=5%",
        "margin-left": -m+"%"
    }, 'slow');
},
intDuration);