HTMLページに2つの列があります。
<div id="content">
<div id="left"></div>
<div id="right"></div>
</div>
それぞれがページの半分を占めています
#left {
float: left;
width: 50%;
}
#right {
float: left;
width: 50%;
}
写真を右の列の中央に配置したいと思います。を行うことで、水平方向の中央に配置できることを知っていmargin-left: auto; margin-right: auto;ます。どうすれば垂直方向の中央に配置できますか？
私が最初に目にする問題は、leftとright divの高さに高さが指定されていないことです。高さは、100%または任意の値に設定する必要があります。画像を垂直方向に中央揃えするには、絶対位置を使用できます。画像のサイズを設定し（どのような場合でもこれは良い習慣です）、次に属性top:50%とleft:50%属性を設定します。ただし、これにより画像がボックスの外側に押し出されるため、画像の幅と高さの半分の負の余白を追加します。div これにより、毎回画像が垂直方向と水平方向に整列します。
更新されたCSSは次のとおりです。
#left, #right {
width: 50%;
height:100%;
float:left;
position:relative;
}
#right img {
position: absolute;
top: 50%;
left: 50%;
width: 80%;
height: 80%;
margin-top: -40%; /* Half the height */
margin-left: -40%; /* Half the width */
}
このJSFiddleを見てください：http：//jsfiddle.net/bYF7F/2/。
この質問が回答済みとしてマークされていることは知っていますが、画像の高さと幅が理想的ではないとおっしゃっていました。だから私は別の解決策を提案したいと思います。
追加：
display: -webkit-flex;
display: flex;
右のdivに、そして：
margin: auto;
画像に。これがあなたが求めていたものだと思います。フィドルhttp://jsfiddle.net/Fqa7b/を参照してください
DIVの代わりにTABLEを使用すると、自動的に中央に配置されます。