CSSで要素の縦横中央寄せを行う3つの方法

Last updated at 2018-01-16Posted at 2018-01-13

要素を縦横中央寄せにするための処理です。
flexboxが主流になった今では、とても簡単になりましたね。
最初に紹介する方法は最近知ったのですが、他の方法を含めまとめておきます。

flex + margin: auto;

これが一番簡単なのではないでしょうか？
記述量が少ないです。お恥ずかしながら最近まで知りませんでした。

// 対象の親要素
.wrap {
  display: flex;
}

// 中央寄せしたい要素
.box {
  margin: auto;
}

最近までは下記のように書いていました。

// 対象の親要素
.wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

// 中央寄せしたい要素
.box {}

flexboxが使える前は、position + translate で書いてましたよね。
たまにrelativeが邪魔になることもありましたが、今ではとても簡単になりました。

// 対象の親要素
.wrap2 {
  position: relative;
}

// 中央寄せしたい要素
.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}