CSS のセンタリング、結局どれを使うか

「中央に置く」だけで何通りもやり方があって、毎回どれだったか迷います。 いろいろ試した結果、自分はほぼ次の二択に落ち着いたので、その二つだけメモしておきます。

縦も横も中央：Flexbox

いちばん出番が多いのはこれです。親にこれを指定すれば、中の要素が上下左右まん中に来ます。

.box {
  display: flex;
  justify-content: center;  /* 横 */
  align-items: center;      /* 縦 */
}

横方向だけ中央：margin auto

幅の決まったブロックを横だけ真ん中にしたいときは、昔ながらのこれがいちばん素直でした。

.box {
  max-width: 720px;
  margin: 0 auto;
}

迷ったら Flexbox、幅が決まったブロックなら margin auto。この分け方にしてから、悩む時間が減りました。

新しい書き方も次々出てきますが、「自分がすぐ思い出せる手札」を少数持っておくほうが、 現場では速い気がしています。