CSSでウィンドウの真ん中にボックスを表示させる方法

質問

固定したサイズのボックスでWebページ（例：760×500）を、
つくり、ユーザーのウィンドウサイズに応じて
常に画面の真ん中に表示させたいのです。

左右を真ん中にするのは、
margin-right:auto;
margin-left:auto;
だと思うのですが、垂直位置の上下余白を同じに
する方法が分かりません。
質問の意味が分かりにくいかもしれませんので
不明点があれば補足します。
よろしくお願いします。

回答No.1

123isao · ベストアンサー

position:absoluteで次のようにすればできます。
まず画面左上をちょうど画面中央にします。
top:50%;
left:50%;
widthとheightは全体のサイズ(760×500)を入れます。
中央に表示させるために左と上にずらします。
ずらす幅は全体のサイズ(760×500)の半分(380×250)です。
margin-top:-250px;
margin-left:-380px;

お礼

ありがとうございます。
教えてくださった方法でやったらうまくいきました！
どこを探しても見つからなかったので
助かりました。