忍者ブログ
but I wish。
カレンダー
11 2017/12 01
S M T W T F S
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
プロフィール
HN:
shu。
年齢:
32
HP:
性別:
男性
誕生日:
1985/01/15
職業:
Programmer。
最新コメント
[10/21 ai]
ブログ内検索
アーカイブ
バーコード
アクセス解析
NINJA-Ad
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

CSSによる縦方向センタリング、画面中央表示の方法です。

[ 縦方向センタリング ]

Sample Source
Sample Page

まず、適当な大きさのボックスを作ります。(サンプルでは縦100px/横200px)
それを[position:absolute]で[top:50%]の位置に置きます。
そして、そこから[margin-top:-50px]でボックスの半分の分だけ、上方向へずらします。
以上で縦方向へのセンタリングは完了です。

また、ボックス内での縦方向センタリングはボックスの[height]と[line-height]を同じ値にする事で実現しています。

[ 画面中央表示 ]

Sample Source
Sample Page

画面中央表示は、上記の縦方向センタリングに、[left:50%]と[margin-left:-100px]を加えるだけです。

PR
 HOME 
Shu's Dog-ear
Twitter
Kenn's Clairvoyance
Eriko Blog
kiriya.com





Template by Crow's nest  忍者ブログ  [PR]