position: absolute;で自動的に上下左右・中央に揃えるためのCSSコード

こんにちは。こちらの記事ではCSSでよく使うポジション「absolute」にて、綺麗に上下左右中央に揃えるためのCSSプロパティを紹介します。
いつも使うので自分用としても残しておきます。

いきなりまとめ表から書いておきますのでお使いの方は是非参考にしてください。

上下左右中央のCSSまとめ

position: absolute;と併用してください。

個別の解説

1.上下中央（縦方向の中央揃え）

要素を 縦方向（上下）中央 に配置するには、top: 50%; を指定し、transform: translateY(-50%); で要素の高さの半分だけ上に移動させます。

.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

2.左右中央（横方向の中央揃え）

要素を 横方向（左右）中央 に配置するには、left: 50%; を指定し、transform: translateX(-50%); で要素の幅の半分だけ左に移動させます。

.child {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

3.上下左右中央（親要素のど真ん中）

要素を 縦横ともに中央 に配置するには、top: 50%; left: 50%; を指定し、transform: translate(-50%, -50%); で要素の中央を基準に移動させます。

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}