任意の要素を常に（スクロールしても）画面の中央に配置

• 要素を常に画面の中央に配置

先日のCSSで画像ポップアップに続いて再び弄ってみました。実用性は確かに微妙ですね。でも各所フォーラムを回っているとこの手の質問も少なくないので意外と需要があるかもしれません。まあ大抵の場合はテーブルレイアウトで解決してしまう場合が多いのですが。

色々書くのはスペース的に無理がありますし、実際にこのページで表現するにしては事情が特殊なのでサンプルを置いておこうと思います。もちろん同じ物を書いてもただのパクリで何の意味も成さないので手を加えています。e-luckさんのサンプルでは、おそらくスクロールが生じた時に画面中央には表示されなくなってしまうと思うので、その辺りを中心に加工してみました（アイディアだけ貰って勝手に利用してしまってすいません）。最初に断って置きますが閲覧想定環境のみでしか確認していませんのでご注意下さい。

• center.html

<p id="cent">
中央に表示させたい要素
</p>
<div id="waku">
fixedが効かないIE用の擬似bodyの様なもの
</div>

html,body {
    margin:0px;
    padding: 0px;
}
body {
    background:#fff;
    height: 100%;
    _overflow: hidden;
}
div#waku {
    overflow: auto;
    height: 100%;
}
p#cent {
    position:fixed;
    left: 50%;
    top: 50%;
    border: 1px solid blue;
    _position: absolute;
    width: 160px;
    height: 120px;
    margin-left: -80px;
    margin-top: -60px;
}

何の説明も無いのは不親切なので簡単に書きます。中央に表示させたい要素はp要素でなくても構いません。先ずはFirefoxやOpera向けに要素にfixedを当てています。しかしIEには効かないのでハックを利用してIEにのみabsoluteを与えます。この時に基準となるbody要素にheight:100%;を指定し、これまたハックを利用してoverflow: hidden;を指定します。しかしこのままではスクロールが不能になってしまうので、p要素以外の（別にp要素を含めても構いませんが）要素をdivで囲ってスクロールを出来るようにしてやります。

また、p要素にborderが付いているのはわかり易くする為なので必要はありません。htmlやbodyのmarginとpaddingも必要に応じて調整して下さい。p要素のwidthやheightはボックスとして認識させた方が、ずれることなく画面の中央に表示させる事が出来るからです。ネガティブマージンについてはLucky bagにも書いてありますが、left: 50%;やtop: 50%;はその要素が始まる位置を指定する物で、要素の内容が縦に伸びたり横に膨らんだりすると中央からズレてしまいます。そのために要素の大きさと、そのネガティブマージンを調整してやる必要があるのです。

これで説明は終わりですが、特にハックの箇所などを中心に、とてもスマートと呼べる代物ではありません。もっと上手く書く事も可能でしょう。こんな方法や書き方があるというトラックバックがあれば嬉しいなと思います。ついでに言えばあ、今確認したら Opera ではうまく行かないみたい。というのは私のサンプルでも同様です。どうやらOpera特有のバグらしく、似たようなものでこんなバグはあったのですが、それとは少し違って、絶対配置要素のtopプロパティの値を相対値にしても上手く動作しないという感じなのですが、誰かこの解決方法を教えて下さい。