もっともっと、もっと先へ。株式会社アットワークMore and more,
further and further.

以前は、要素の大きさが不明の要素を天地左右で中央寄せする方法は、transform:が一般的でしたが、レイアウトモジュールが増えて、ブラウザーが対応したことで、もっとシンプルに中央寄せすることが可能になりました。
ここでは、要素の幅・高さが不明（可変）な場合でも、CSSだけで左右・上下中央に配置する方法を用途別に「確実に使える方法」を解説します。

方法①：Flexbox

現在、最も汎用的な方法。子のサイズが不明でも柔軟に対応しますし、レスポンシブに強く、実務で最もよく使う方法です。

<div class="parent">
  <div class="child">中央にしたい要素</div>
</div>

.parent {
  display: flex;
  justify-content: center; /* 横中央 */
  align-items: center;     /* 縦中央 */
  height: 100vh;           /* 高さが必要 */
}

方法②：Grid

最もシンプルな記述で可読性が高くモダン環境では推奨される方法です。

.parent {
  display: grid;
  place-items: center;
  height: 100vh;
}

place-itemsは
align-items + justify-itemsのショートハンドです。

方法③：position + transform

古典的な方法で、モーダルやオーバーレイで多用されます。要素サイズ不明でも完全中央に配置されますが、親要素にposition: relativeが必要です。

.parent {
  position: relative;
  height: 100vh;
}


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

方法④：margin auto

意外と知られていない便利技で、Flexを使わない方法。幅高さが自動計算され中央配置されます。

.parent {
  display: grid;
  height: 100vh;
}


.child {
  margin: auto;
}

どれを使うべき？

注意点

• height: 100%;など、親に高さがないと縦中央は効きません。
• 100vhはモバイルでアドレスバー影響を受ける場合あります。

display: grid;
place-items: center;

結論として、現代CSSでは、display: grid;を使うのが、最もシンプルで堅牢な方法ですが、使い所を考慮して、今回紹介した方法で実装してみてください。