CSS显示图像始终位于中心

Question

我在相对位置有一个div,在里面我用其他div显示图像,问题是这个div里面的图像改变了他的大小我可以放在绝对位置的中心,但如果图像大小改变,最后改变他的位置

#image_container
{   
position:relative;
width:336px;
height:328px;
border:1px solid;
}


#image_load
{   
top:50px;
position:absolute;
width:auto;
height:auto;
left:50%;
margin-left:-50%;
} 

<div id="image_container">
    <div id="image_load">
        <img src="test.png">
    </div>
</div>

如果图像尺寸发生变化,我如何能够始终将位置固定在中心位置？

Answer 1

jsfiddle demo最好 的方法是不给宽度,即

#image_load img
{   
top:0;left:0; right:0; bottom:0;
position:absolute;
margin:auto
} 

并检查这一点:绝对水平和垂直居中在CSS非常有用.