DIV要素を縦横中央に配置する

カテゴリ：CSSテクニック 2008年1月31日 11:09

もっとフレキシブルに対応できる垂直中央寄せの記事を新しく書きました。
ブロック要素を内容量に応じて自動で上下左右にセンタリングさせるトリック

とある CSS による Lightbox 的表現のエントリーを見ていて、以前に書いた DIV要素を垂直方向に中央寄せするよりも簡潔な CSS (と HTML)で縦横垂直が実現できそうだったので書いてみた。n

div 要素を縦横中央に配置するデモ

http://css-eblog.com/eblog_sample/0801/31/vertical_center/

まず最初にまとめを話してしまうと、絶対配置にした div 要素を、縦横 50% の位置に移動する。
するとボックスの左上が画面中央にくるので、さらにその後ネガティブマージンを使ってボックスの中央を画面中央に合わせる、というものです。n

▼EntryMore▼

CSS ソース

htmlとbodyにheight100%を適用します。
そうしないと、その配下にあるボックス要素全部がheight:100%に設定しても画面いっぱいに高さが反映されないためです。n

#box自体は最初に書いた通り、絶対配置にしてtop, leftともに50%に設定します。
そのあとでボックス分のネガティブマージンをとります。
(サンプルの場合margin-left: -182px;margin-top: -115px;の部分です）
これは、ボックスのwidth,heightの半分の値を指定します。n

つまり、ボックス要素の左上をいったん中央にこさせ、そのあとでボックスの幅、高さ分ずれている部分をネガティブマージンで相殺する、という形です。n

合わせて読むと役に立つかもなエントリー

この記事のカテゴリー一覧を見る⇒CSSテクニック

パーマリンク
コメント(0)
トラックバック(1)

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/60

トラックバック

divを縦横画面中央に配置する。

align%CD%D7%C1%C7%A4%CF%B2%A3%CA%FD%B8%FE%A4%B7%A4%AB%C0%A9%B8%E6%A4%C7%A4%AD...

by三浦仮想研究所 2008年5月24日 16:41