Flashを上下左右、どんなWindow幅の時にでも必ず画面の中央に配置したくて調べてみました。今回はそれをCSSで実現する方法を紹介したいと思います。

まずXHTMLは下記のようになります。

<div id="main"> <embed src="test.swf" width="760" height="340"></embed> </div>

ここは特にFLASHである必要は無く表示したい要素を入れこんでください。

CSSを以下のように記述します。ここで気をつけて欲しいのがmarginの値です。中央に表示したい幅と高さそれぞれの半分の値をネガティブマージンで指定します。これはposition:absolute;とtop:50%;とleft:50%;を使ってmainボックスの基点が画面中央になっているので、このままでは要素の左角が中央に来てしまうためネガティブマージンで調整します。

#main { position:absolute; width:760px; height:340px; left: 50%; top: 50%; margin-left: -380px; margin-top: -170px; }

入れこみたい要素が画像で無い場合は

overflow:auto;

を指定すると内容が多くなった場合でも崩れる事が無くなりますので安心ですが、要素が画像やFLASHの場合は入れてしまうとIE6.0等ではスライドバーが出てしまう恐れがありますので入れない方が無難です。

■参考サイト
画面中央に配置する 〜CSSテクニック〜
Lucky bag::blog: 要素を常に画面の中央に配置