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

只需删除position:fixed，因此text-align: center;将为您居中。

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

.image img {
width: 1%;
}  

或使用display:blockand margin-left:auto,margin-right:auto

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

.image img {
width: 1%;
display:block;
margin-left:auto;
margin-right:auto;
} 

Answer 2

尝试这个

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);

Answer 3

您的 JS 和 HTML 文件显示正确，尝试使用此方法更改您的 CSS 文件。

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

下面你需要设置margin: auto; 它会自动将您的图像设置在中心位置。

   .image img
   {
        width: 1%;
        position: fixed;
        margin: auto;
   }

试试这个，它可能会解决你的问题

Answer 4

尝试margin: 0 auto;或类似的东西#image。

还可以考虑在 jsbin 或 jsfiddle 中重现您的问题并与我们分享。这将有助于我们更准确地了解您的问题，并使我们更有可能找到解决方案。