お問い合わせ
お問い合わせ
ホーム > CSS > レイアウト > CSSで中央揃えする方法まとめ（Flexbox・Grid・transform別）

CSSで中央揃えする方法まとめ（Flexbox・Grid・transform別）

CSS
CSSで要素を中央揃えする方法（Flexbox・Grid・transform）の解説図
Flexbox・Grid・transformを使ったCSSの中央揃え方法まとめ

Web制作でよく使うレイアウト調整のひとつに「中央揃え」があります。テキストや画像、ボタンなどを画面の中央に配置する方法は複数あり、状況によって最適解が異なります。今回は Flexbox・Grid・transform を使った中央揃えの方法をまとめて解説します。

1. Flexboxを使った中央揃え

Flexboxは、親要素に display: flex; を指定することで、子要素を柔軟に整列できます。

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

.parent {
  display: flex;
  justify-content: center; /* 横方向 */
  align-items: center;    /* 縦方向 */
  height: 100vh;
}
.child {
  background: #eee;
  padding: 20px;
}

👉 これで .child 要素が画面の中央に配置されます。
Flexboxはモダンブラウザで広くサポートされているため、中央揃えの定番手法です。

2. Gridを使った中央揃え

CSS Gridは、より自由度の高いレイアウトを実現できる仕組みです。中央揃えもシンプルに書けます。

.parent {
  display: grid;
  place-items: center; /* 横・縦の中央揃えを一括指定 */
  height: 100vh;
}
.child {
  background: #ddd;
  padding: 20px;
}

👉 place-items: center; を使うと、わずか1行で中央揃えが完了します。
複雑なレイアウトを組むときに、Gridと合わせて使うのがおすすめです。

3. transformを使った中央揃え

FlexboxやGridが使えない状況（古い環境など）では、position と transform を組み合わせた方法も有効です。

.parent {
  position: relative;
  height: 100vh;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #ccc;
  padding: 20px;
}

👉 この方法は古典的ですが、特にメールHTMLや古いブラウザ対応時に役立ちます。

どの方法を選べばいい？

  • Flexbox → 一番汎用的でおすすめ
  • Grid → Gridレイアウトを使う場合に最適
  • transform → 古い環境や制約のある場面で活躍

基本的には Flexboxを優先 し、レイアウト全体をGridで組んでいるなら place-items: center; を使うのがシンプルです。

まとめ

CSSでの中央揃えにはいくつかの方法がありますが、目的や環境によって最適なアプローチが変わります。

  • Flexbox → justify-content と align-items
  • Grid → place-items: center;
  • transform → position + transform

中央揃えの方法をマスターしておくと、どんなUIにも対応しやすくなります。

👉 関連記事：