▼EntryMore▼
CSSサンプルはこんな感じ。
- html , body {
- background: #fff url(css/images/bg2.gif) left top no-repeat;
- width: 100%;
- height: 100%;
- }
- #box {
- background: url(css/images/bg.gif) left top no-repeat;
- color: #fff;
- position: absolute;
- top: 50%;
- left: 50%;
- margin-left: -182px;
- margin-top: -115px;
- width: 364px;
- height: 230px;
- }
htmlとbodyにheight100%を適用します。
そうしないと、その配下にあるボックス要素全部がheight:100%に設定しても
画面いっぱいに高さが反映されないためです。
#box自体は最初に書いた通り、絶対配置にしてtop,leftともに50%に設定します。
そのあとでボックス分のネガティブマージンをとります。
(サンプルの場合「margin-left: -182px; margin-top: -115px;」の部分です）
これは、ボックスのwidth、heightの半分の値を指定します。
つまり、ボックス要素の左上をいったん中央にこさせ、
そのあとでボックスの幅、高さ分ずれている部分をネガティブマージンで相殺する、という形です。
