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

另一種選擇是在父級和顯示器上使用display：table：child-with vertical-align：middle使用table-cell。

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

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

Answer 2

嘗試

#image_load img { 
    width:100%; 
} 

Answer 3

的jsfiddle演示 的百威是給沒有寬度，即

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

和檢查：Absolute Horizontal And Vertical Centering In CSS非常有用的。

Answer 4

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