コーディングを行う上で画像やコンテンツを中央に配置する事は多くあります。
比較的新しい手法から、過去に良く使われていた手法のご紹介です。

Flexbox を使用する方法

Flexbox は、要素を柔軟に配置するための強力なツールです。要素を中央に配置するには、以下のようにします

See the Pen cssで要素を中央に配置する方法 by perenote (@perenote) on CodePen.

.container {
  display: flex;
  justify-content: center; /* 横方向（水平方向）の中央揃え */
  align-items: center; /* 縦方向（垂直方向）の中央揃え */
  height: 100vh; /* 例としてコンテナの高さを100%のビューポート高に設定 */
}

この例では、.container 内の要素が中央に配置されます。justify-content: center; は横方向の中央揃えを行い、align-items: center; は縦方向の中央揃えを行います。

display: grid を使用する方法

もう一つの現代的な方法として、CSS Grid を使用する方法があります。

.container {
  display: grid;
  place-items: center; /* flexboxと同様に、横方向と縦方向の中央揃えを行う */
  height: 100vh;
}

place-items: center; は、Grid コンテナ内のアイテムを中央に配置します。

position:absolute を使用する方法

Flexbox や Grid を使用できない場合や、最近ではほぼ無いですが古いブラウザをサポートする必要がある場合には、絶対位置指定を使う方法もあります。

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

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

この方法では、要素を左上がりの角から中央に移動させるために、top: 50%; と left: 50%; を使用し、transform: translate(-50%, -50%); を使って要素を中央に移動させます。

まとめ

以上が、要素を中央に配置するためのいくつかの方法です。Flexbox や Grid が現代の推奨される方法であり、レスポンシブなデザインにも対応していますが、旧式の方法も場合によっては役立ちますので適宜活用してください。