css - 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中非常有用。

Answer 2

#image_load img {   
    width:95%;
    margin-left:auto;
    margin-right: auto;
} 

Answer 3

尝试

#image_load img {   
    width:100%;
} 

Answer 4

另一种选择是在父级上使用 display:table，在子级上使用 display:table-cell 并使用vertical-align:middle。

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

    #image_load
    { 
        text-align:center;
        vertical-align:middle;
        display:table-cell;           
    }