2008/08/25

CSS:: ブロックを画面中央に配置

ブラウザの画面サイズが変更しても特定のブロック(<div>~</div>)を画面中央に配置するCSSを教えてもらいました。

キモは、ネガティブマージン!widthとheightの1/2の値をmargin-top、margin-leftに設定してやるとブラウザのど真ん中に配置されます。

■ソース
<div id="contetn">
 <img src="~" alt="~" />>
</div

■CSS
#content{
position:absolute;
top:50%; ←ブロック部左上を画面縦方向の半分に配置
left:50%; ←ブロック部左上を画面横方向の半分に配置
width:700px;
height:225px;
margin-top:-112px; ←ネガティブマージンを設定
margin-left:-250px; ←ネガティブマージンを設定
}
スポンサーリンク

スポンサーリンク