簡単に要素を中央に配置する方法を紹介したいと思います。

水平中央配置

方法1: text-align: center

インライン要素またはインラインブロック要素を親要素の中央に配置。

<div style="text-align: center;">
  <span>中央に配置</span>
</div>

方法2: margin: auto

ブロック要素に使用。親要素に display: block と width を指定。

<div style="width: 50%; margin: 0 auto; background: lightgray;">
  中央に配置
</div>

方法3: display: flex

Flexboxを使用して、子要素を水平中央に配置。

<div style="display: flex; justify-content: center;">
  <div>中央に配置</div>
</div>

垂直中央配置

方法4: line-height を使用

行の高さを親要素の高さに等しくし、テキストを垂直方向に中央配置。

<div style="height: 100px; line-height: 100px; text-align: center; background: lightgray;">
  中央に配置
</div>

方法5: display: table-cell

table-cell と vertical-align: middle を使用。

<div style="display: table; height: 100px; width: 100%; text-align: center;">
  <div style="display: table-cell; vertical-align: middle;">中央に配置</div>
</div>

方法6: Flexboxを使用

Flexboxの align-items: center を使用。

<div style="display: flex; align-items: center; height: 100px; background: lightgray;">
  <div>中央に配置</div>
</div>

水平および垂直中央配置（完全中央）

方法7: Flexboxを使用

justify-content: center と align-items: center を組み合わせる。

<div style="display: flex; justify-content: center; align-items: center; height: 100vh; background: lightgray;">
  <div>中央に配置</div>
</div>

方法8: position と transform を使用

絶対配置で中央を指定。

<div style="position: relative; height: 100vh;">
  <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
    中央に配置
  </div>
</div>

方法9: margin を使用

絶対配置と margin: auto を組み合わせる。

<div style="position: relative; height: 100vh;">
  <div style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 100px; height: 50px; background: lightgray;">
    中央に配置
  </div>
</div>