CSS で縦横センタリング! 要素を画面中央に『ドン!!』と表示する方法
9 years ago
画面中央にドンッと画面を表示する方法です.
CSSで要素を画面中央に表示する方法
CSS で要素を画面中央に表示するには, まず position
に absolute
を指定します.
これで座標が絶対値指定になります.
次に top
, right
, bottom
, left
にそれぞれ 0
を指定します.
最後に margin
に auto
を指定するとキレイに画面中央に表示されます.
セレクタ {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
margin: auto;
width: 128px;
height: 64px;
}
また, absolute
は親要素が position:relative
であればその親要素が基準位置になるので, 画面全体ではなく指定した要素内でセンタリングしたい場合はその要素に position:relative
を指定しましよう.
注意点としては, 基準となる width
, height
の値を指定しないとキレイにセンタリングされないという点です.
Runstant Demo
こちらが実際のサンプルになります. 画面真ん中にセンタリング表示されているのが分かるかと思います.
Examples
画像を画面中央に表示しよう
親要素を基準としたセンタリング
それぞれの要素内でセンタリング表示されているがわかるかと思います.
まとめ
今回は position: absolute
を使ったセンタリング方法について解説しました.
実は他にも table-cell
を使ったり, 今後主流になるであろう Flexbox
プロパティを使ったやり方もあります.
その辺はまた別の機会に解説したいと思います.