CSSで要素を中央に配置するテクニック：水平・垂直の両方を解説

Webデザインでは、要素を中央に配置することがよく求められます。しかし、CSSで中央配置を実現する方法はいくつかあり、状況に応じて適切な方法を選ぶ必要があります。本記事では、要素を水平・垂直の両方で中央に配置するテクニックを紹介します。

1. text-align: center（インライン要素の中央配置）

テキストやインライン要素を中央に配置するには、親要素に text-align: center; を指定します。

div {
  text-align: center;
}

ただし、ブロック要素には適用されない点に注意が必要です。

2. margin: auto（ブロック要素の水平方向の中央配置）

ブロック要素を水平方向の中央に配置するには、margin: auto; を使用します。

div {
  width: 50%;
  margin: auto;
}

親要素に display: flex; を指定していない場合、ブロック要素は width を指定しないと margin: auto; は適用されません。

3. flexbox を使った中央配置

Flexboxを使用すると、水平・垂直の中央配置が簡単に実現できます。

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

この方法は、height を指定する必要があります。

4. grid を使った中央配置

CSS Gridを使うと、簡潔なコードで中央配置が可能です。

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

place-items: center; は justify-items と align-items を同時に center に設定するショートハンドです。

5. position: absolute を使った中央配置

絶対位置指定を使う方法もあります。

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

この方法では、親要素に position: relative; を指定する必要があります。

まとめ

• text-align: center; はインライン要素に適用可能。
• margin: auto; はブロック要素の水平方向の中央配置に有効。
• flexbox は display: flex; justify-content: center; align-items: center; を使う。
• grid は display: grid; place-items: center; でシンプルに実装可能。
• position: absolute; と transform: translate(); を組み合わせる方法もある。

状況に応じて適切な方法を選び、中央配置を活用しましょう！

最後まで読んでいただきありがとうございます！

このブログは初心者向けwebデザイナー向けにHTML、CSSの基礎知識を発信しています。
この記事を読んだ方に少しでもお役に立てれば幸いです。