CSS にて複数行(高さが可変)の要素に対して縦揃えを中央に配置する方法

phi phi

以前, 『CSS でテキストの縦揃えを上揃え, 中央揃え, 下揃えにする方法 | phiary』というエントリーを書きました.

このエントリーで紹介した中央揃えにする方法は, 複数行ある要素だと高さに合わせて CSS を書き換える必要がありました.

今回は, 高さが不確定な要素でもキレイに中央揃えにする方法を紹介します.

Runstant Demo

とりあえずデモです. 一番右の複数行あるやつでも縦揃えセンタリングしているのがわかるかと思います.

How to

やり方について解説します.

まずセンタリングしたい要素の親要素に対して, position:absolute; を指定します.

今回でいうと .box ですね.

.box {
  position: aboslute;
  ...
}

次に, センタリングしたい要素に対して下記のように指定します.

.box p {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

何をやっているかというと, position: absolutetop: 50% で親要素の中央にtop の座標を移動させて, 更に transform: translateY(-50%) することで自分自身のサイズの半分の値を上に戻しています.

こうすることで要素の高さが変更されても中央揃えになります.

ゲームプログラミングでよくある (SCREEN_HEIGHT/2)-(this.height/2) 的なことを CSS でやってる感じですね♪

Reference