CSS レイアウト - 水平および垂直方向の配置

Volardev 編集部 April 12, 2026

1. 要素の中央寄せ（水平方向）

ブロック要素（<div> など）を水平方向に中央寄せするには、margin: auto; を使用します。

要素に幅（width）を設定することで、その要素がコンテナの端まで広がるのを防ぎます。その後、マージンが指定した幅を差し引いた残りのスペースを左右に均等に分割します。

.center {
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 10px;
}

注意: 幅（width）プロパティが設定されていない場合（または 100% に設定されている場合）、中央寄せの効果は見られません。

2. テキストの中央寄せ

要素内のテキストを中央に寄せるだけであれば、text-align: center; を使用します。

.center {
  text-align: center;
  border: 3px solid green;
}

3. 画像の中央寄せ

画像を中央に配置するには、margin: auto; を設定し、さらにその要素を display: block; に変更します。

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

4. 左右の配置 - position プロパティを使用する

要素を配置する手法の一つとして、position: absolute; を使用する方法があります。

.right {
  position: absolute;
  right: 0px;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}

注意: 絶対配置（absolute）された要素は通常のドキュメントフローから外れるため、他の要素と重なる可能性があります。

5. 左右の配置 - float プロパティを使用する

要素を配置するもう一つの手法は、float プロパティを使用することです。

.right {
  float: right;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}

5.1 Clearfix ハック

親要素よりも浮いた（float）要素が高い場合、親要素の外にはみ出してしまいます。これを解決するために「Clearfix ハック」を追加します。

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

6. 垂直方向の中央寄せ - padding を使用する

CSS で要素を垂直方向に中央寄せする方法はいくつかあります。最も簡単なのは、上下の padding を使用することです。

.center {
  padding: 70px 0;
  border: 3px solid green;
}

水平方向と垂直方向の両方で中央寄せにしたい場合は、padding と text-align: center; を組み合わせます。

.center {
  padding: 70px 0;
  border: 3px solid green;
  text-align: center;
}

7. 垂直方向の中央寄せ - line-height を使用する

一文字、あるいは一行のテキストを中央寄せにする場合、height（高さ）と同じ値の line-height プロパティを指定するテクニックが有効です。

.center {
  line-height: 200px;
  height: 200px;
  border: 3px solid green;
  text-align: center;
}

/* テキストが複数行になる場合は、以下のようにリセットします */
.center p {
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}

8. 垂直方向の中央寄せ - position と transform を使用する

padding や line-height が使えない場合は、position プロパティと transform プロパティを組み合わせて中央寄せにすることができます。

.center {
  height: 200px;
  position: relative;
  border: 3px solid green;
}

.center p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  /* 要素の自身のサイズに基づいて位置を調整 */
  transform: translate(-50%, -50%);
}

9. 垂直方向の中央寄せ - Flexbox を使用する

モダンなブラウザであれば、Flexbox を使用するのが最もスマートな方法です。justify-content と align-items を使用することで、水平・垂直の両方で簡単に中央寄せが可能です。

.center {
  display: flex;
  justify-content: center; /* 水平方向の中央寄せ */
  align-items: center;     /* 垂直方向の中央寄せ */
  height: 200px;
  border: 3px solid green;
}