ブラウザの上下左右の中央に要素を配置
横はtext-align:center;で簡単に中央に寄るんですが、縦は困ってしまいます。
tableの中だったらvertical-align: middle;で寄せれるんですが、そのためにtable作るのもイヤです。
まー、上下左右中央寄せの必要がある要素なんて滅多にありません。寄せる意味が分からないですもの。絶対的な必要性を感じない。
しかし、例えば、そのページのコンテンツがサイトへのログインボックスだけ、なんて場合。
これは、まぁ、アリかナシかって言ったらアリでしょう。こういう場合は中央もいいかもしれないですね。
あとはー、Flashのみのページもいけるかもしれない、かな？
HTMLの記述
<body>
<div id="loginbox">（上下左右中央寄せしたい要素）</div>
</body>CSSの記述
#loginbox {
position: absolute;
width: 400px;
height: 200px;
top: 50%;
left: 50%;
margin: -100px 0 0 -200px;
}2008/11/11一部間違いがありましたので修正しました。大変失礼しました。
要素ボックスを上左端からbodyの中心（topから50%、leftから50%）の位置に配置します。
その後、要素ボックスの横幅、縦幅の半分の値をマイナス方向に移動します。
これで上下左右中央寄せができました。
ただし、この方法でいくと、要素ボックスの横幅、縦幅は必須になります。
値の半分で位置をマイナスしなきゃいけませんからねぇ。
要素ボックスの中身が変動して、要素ボックスのサイズが変わってしまう場合は、この方法は使えませんのでご注意くだされ。、
助かりました。ありがとうございます。
が、marginの指定が、縦横、逆になっています。
もし、記事を直されましたら、このコメントは混乱するので消していただけると良いかと思います。
コメントありがとうございます。
そして間違いの指摘ありがとうございます！記事は修正しておきました！もう本当にごめんなさい！ご迷惑をおかけしまして！
「修正後コメントは消して」ということですが、自分に対するけじめとして残させていただきます。記事を書いた後は見直しするようにします本当。
ご報告ありがとうございました！