css - CSS 画像を常に中央に表示

Question

相対位置に 1 つの 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 デモ 最善の方法は、幅を指定しないことです。

#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

もう 1 つの方法は、親に 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;           
    } 

Answer 4

試す

#image_load img {   
    width:100%;
}