CSSで要素を中央寄せにする5つの方法！初心者にもわかりやすく徹底解説

2024年7月30日2024年8月27日

misa

こんにちは、ウェブデザインパレットのmisaです。

Webサイトのデザインにおいて、要素を中央に配置することは頻繁に必要となるテクニックです。

要素を中央寄せにすることは、視覚的なバランスを整え、ユーザーが見やすいレイアウトを作る上で大切です。
特に、見出しやロゴ、画像など、目立たせたい要素を中央に配置することで、デザインに統一感と安定感を与えることができます。

CSSには複数の中央寄せ方法がありますが、今回はその中から5つの主要な方法を紹介します。

水平方向の中央揃え

1. text-align: center

text-align: centerで、インライン要素（テキスト、リンク、画像など）を水平方向に中央に配置します。

使用方法

親要素にtext-align: centerを適用します

HTML

<div class="text-center">
  <p>テキストの中央寄せ</p>
  <a href="#">リンクの中央寄せ</a>
  <img src="image.jpg" alt="インライン要素の画像を中央寄せ">
</div>

CSS

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

テキストの中央寄せ

リンクの中央寄せ

ブロック要素にtext-align: centerは効かないので注意しましょう。

2. margin-inline: auto

margin-inline: autoで、固定幅のブロック要素を水平方向に中央に配置します。

使用方法

width プロパティで要素の幅を指定します
margin-inline: autoで、左右のマージンを自動で計算し、要素を水平方向に中央に配置します

HTML

<div class="center-block">
  ブロック要素の中央寄せ
</div>

CSS

.center-block {
  width: 300px;
  margin-inline: auto
  background-color: #ffa07a;
  padding: 20px;
}

ブロック要素の中央寄せ

margin-inline: autoの代わりにmargin: ０autoを使用してもOKです。

水平・垂直両方の中央揃え

3. flexbox

flexbox を使用すると、子要素を水平・垂直両方向に簡単に中央寄せできます。

使用方法

display: flex で、親要素をフレックスコンテナにします
justify-content: centerで、子要素を水平方向に中央に配置します
align-items: centerで、子要素を垂直方向に中央に配置します

HTML

<div class="flex-center">
  <div class="flex-item">フレックスボックスで左右上下中央寄せ</div>
</div>

CSS

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  background-color: #f0f0f0;
}

.flex-item {
  padding: 20px;
  background-color: #ffa07a;
}

フレックスボックスで左右上下中央寄せ

4. grid

gridでも、子要素を水平・垂直両方向に簡単に中央寄せできます。

使用方法

display: grid で、親要素をグリッドコンテナにします
place-items: centerで、子要素を水平方向と垂直方向の両方に中央に配置します

HTML

<div class="grid-center">
  <div class="grid-item"> グリッドレイアウトで左右上下中央寄せ</div>
</div>

CSS

.grid-center {
  display: grid;
  place-items: center;
  height: 300px;
  background-color: #f0f0f0;
}

.grid-item {
  padding: 20px;
  background-color: #ffa07a;
}

グリッドレイアウトで左右上下中央寄せ

place-itemsはalign-itemsとjustify-itemsのショートハンドプロパティです。

5. positionとtranslate

positionプロパティとtranslateプロパティで、親要素に対して子要素を絶対的に配置します。

使用方法

親要素を相対配置（position: relative）にします
子要素を絶対配置（position: absolute）にし、上下左右の位置を50%に設定します
translateを使用して要素自体のサイズの半分だけ戻すことで、完全に中央に配置します

HTML

<div class="position-relative">
  <div class="position-absolute-center">
    positionとtranslateで左右上下中央寄せ
  </div>
</div>

CSS

.position-relative {
  position: relative;
  height: 300px;
  background-color: #f0f0f0;
}

.position-absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  translate:-50% -50%;
  padding: 20px;
  background-color: #ffa07a;
}