画面中央にドンッと画面を表示する方法です.

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 プロパティを使ったやり方もあります.

その辺はまた別の機会に解説したいと思います.