HTML/CSS で要素を中央揃え

HTML, CSS で要素を水平中央揃えする方法

要素を水平中央揃えするとは？

HTML で作成した要素を、ページや親要素の中央に水平方向に配置することを指します。

水平中央揃えの方法

方法1: margin: 0 auto; を使う

最も一般的な方法です。要素の幅を指定し、margin: 0 auto; を適用します。

.center-element {
  width: 200px;
  margin: 0 auto;
}

方法2: Flexbox を使う

親要素を Flexbox に設定し、justify-content: center; を適用します。

.parent-element {
  display: flex;
  justify-content: center;
}

方法3: Grid レイアウトを使う

親要素を Grid レイアウトに設定し、place-items: center; を適用します。

.parent-element {
  display: grid;
  place-items: center;
}

方法4: text-align: center; を使う (テキストのみ)

インライン要素（例えば <span> や <p>）のテキストを中央揃えする場合に使用します。

.center-text {
  text-align: center;
}

方法5: transform: translateX(-50%); left: 50%; を使う (絶対位置の場合)

要素を絶対位置に設定し、transform: translateX(-50%); left: 50%; を適用します。

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

重要なポイント

• text-align: center; はテキストのみ有効です。
• Flexbox や Grid レイアウトを使う場合は、親要素にスタイルを適用します。
• 要素の幅を指定する必要があります（方法1、方法5）。

注意
実際の使用場面に応じて、最適な方法を選択してください。また、ブラウザの互換性にも注意が必要です。

例

<div class="parent-element">
  <div class="center-element">中央揃えの要素</div>
</div>

.parent-element {
  display: flex; /* または display: grid; */
  justify-content: center; /* または place-items: center; */
}

.center-element {
  width: 200px;
  background-color: lightblue;
}

コード例の説明

例1: margin: 0 auto; を使った水平中央揃え

.center-element {
  width: 200px;
  margin: 0 auto;
}

• margin: 0 auto; で上下のマージンを 0 ピクセル、左右のマージンを自動調整します。これにより、要素が水平方向に中央揃えされます。
• width: 200px; で要素の幅を 200 ピクセルに設定します。
• .center-element というクラス名を持つ要素に対してスタイルを定義しています。

例2: Flexbox を使った水平中央揃え

.parent-element {
  display: flex;
  justify-content: center;
}

• justify-content: center; で子要素を水平方向に中央揃えします。
• display: flex; で親要素を Flexbox レイアウトにします。

例3: Grid レイアウトを使った水平中央揃え

.parent-element {
  display: grid;
  place-items: center;
}

• place-items: center; で子要素を水平方向と垂直方向に中央揃えします。

.center-text {
  text-align: center;
}

• text-align: center; で要素内のテキストを水平方向に中央揃えします。

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

• transform: translateX(-50%); で要素を水平方向に -50% 移動させ、中央揃えします。
• left: 50%; で要素の左端を親要素の左端から 50% の位置に設定します。
• position: absolute; で要素を絶対位置に設定します。

テーブルレイアウトを利用する (非推奨)

かつてはよく使われていましたが、現在では Flexbox や Grid レイアウトが推奨されるため、あまり使用されません。

.center-element {
  display: table;
  margin: 0 auto;
}

絶対位置と負のマージンを利用する

要素を絶対位置に設定し、負のマージンを使って中央揃えします。

.parent-element {
  position: relative;
}

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

インラインブロック要素の text-align: center;

インラインブロック要素に対して、親要素の text-align: center; を使用して中央揃えできます。

<div class="parent">
  <span class="center-element">中央揃えの要素</span>
</div>

.parent {
  text-align: center;
}

.center-element {
  display: inline-block;
}

Flexbox の align-self: center;

Flexbox 内の子要素に対して、align-self: center; を使用して水平方向に中央揃えできます。

.parent-element {
  display: flex;
}

.center-element {
  align-self: center;
}

Grid レイアウトの justify-self: center;

Grid レイアウト内のアイテムに対して、justify-self: center; を使用して水平方向に中央揃えできます。

.parent-element {
  display: grid;
}

.center-element {
  justify-self: center;
}

• Flexbox や Grid レイアウトは、現代的なレイアウト手法であり、柔軟性が高く、推奨される方法です。
• インラインブロック要素の text-align: center; は、特定のケースでのみ有効です。
• 絶対位置と負のマージンは、他の方法よりも複雑で、レイアウトの調整が難しくなる場合があります。
• テーブルレイアウトは、レイアウトの複雑化やアクセシビリティの問題を引き起こす可能性があるため、推奨されません。