Go to Qiita Advent Calendar Top
LoginSignup
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@nolanlover0527(Yuuki)inエレクス株式会社

【初心者必見】もう迷わない！CSSのセンタリング全パターンまとめ

Posted at

センタリング手法一覧表

まずは、主に使用されるCSSセンタリング全パターンを一目で確認できる比較表をご覧ください。

手法 記述量 難易度 対応ブラウザ おすすめ度
CSS Grid + place-content ★★☆☆☆ ★☆☆☆☆ モダンブラウザ全対応 ★★★★★
Flexbox ★★★☆☆ ★☆☆☆☆ モダンブラウザ全対応 ★★★★★
Grid + place-items ★★☆☆☆ ★★☆☆☆ モダンブラウザ全対応 ★★★★☆
margin: auto（Flexbox併用） ★★☆☆☆ ★☆☆☆☆ モダンブラウザ全対応 ★★★★☆
Position + Transform ★★★★☆ ★★★☆☆ 全ブラウザ対応 ★★★☆☆

※モダンブラウザとは、現在のウェブ標準技術（HTML5・CSS3・ES6以降のJavaScriptなど）に対応しているブラウザのことを指します。Chrome/FireFox/Edge/Safari/Opera/Braveなどほとんどのブラウザはここに含まれます

それでは、各手法を詳しく見ていきましょう。

【推奨】方法1: CSS Grid + place-content（最短2行）

難易度: ★☆☆☆☆ | 記述量: 最小

2025年現在、最も簡単でモダンな方法です。たった2行のコードで上下左右の中央揃えが完成します。

コード例

See the Pen Untitled by STELLAR INTER (@STELLAR-INTER) on CodePen. 

<div class="container">
  <div class="box">中央に配置</div>
</div>

.container {
  display: grid;
  place-content: center;
  
  /* デモ用のスタイル */
  height: 100vh;
  border: 2px solid #333;
}

.box {
  padding: 20px;
  background: #4CAF50;
  color: white;
}

仕組みの解説

place-contentは、align-contentとjustify-contentを一括で指定できるショートハンドプロパティです。

  • place-content: center; = グリッド全体を中央に配置

この方法は、1つの要素でも複数の要素でも柔軟に対応できます。

メリット

  • コード量が最小（2行）
  • 子要素のサイズ指定不要
  • 単一要素・複数要素どちらも対応可能

デメリット

  • 2020年以降のブラウザが必要（IE11非対応）

使用シーン

モダンブラウザのみをターゲットにする場合、すべてのセンタリングでこの方法を使えます。最もシンプルで保守性が高い手法です。

方法2: Flexbox（定番の3行）

難易度: ★☆☆☆☆ | 記述量: 普通

最も広く使われている定番の方法で、私自身もよく使っています。Flexboxは2017年頃から全ブラウザで安定して動作しており、実務でも最頻出のテクニックです。

コード例

See the Pen Untitled by STELLAR INTER (@STELLAR-INTER) on CodePen. 

<div class="container">
  <div class="box">中央に配置</div>
</div>

.container {
  display: flex;
  justify-content: center;  /* 水平方向の中央揃え */
  align-items: center;      /* 垂直方向の中央揃え */
  
  /* デモ用のスタイル */
  height: 100vh;
  border: 2px solid #333;
}

.box {
  padding: 20px;
  background: #2196F3;
  color: white;
}

仕組みの解説

Flexboxは 主軸（main axis）と交差軸（cross axis） の概念で要素を配置します。

  • justify-content: center; → 主軸方向（デフォルトは横方向）の中央揃え
  • align-items: center; → 交差軸方向（デフォルトは縦方向）の中央揃え

複数要素の横並び中央揃え

See the Pen Untitled by STELLAR INTER (@STELLAR-INTER) on CodePen. 

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;  /* 要素間の間隔（2021年から全ブラウザ対応） */
  height: 100vh;
  border: 2px solid #333;
}

.item {
  padding: 20px;
  background: #FF9800;
  color: white;
}

縦並び中央揃え

See the Pen Untitled by STELLAR INTER (@STELLAR-INTER) on CodePen. 

.container {
  display: flex;
  flex-direction: column;  /* 縦方向に並べる */
  justify-content: center;
  align-items: center;
  gap: 10px;
  height: 100vh;
  border: 2px solid #333;
}

メリット

  • 広く普及しており、情報が豊富
  • 複数要素の配置に強い
  • レスポンシブデザインに適している
  • 全モダンブラウザで安定動作

デメリット

  • 特になし

使用シーン

複数要素を並べる場合や、要素間の間隔調整が必要な場合に最適です。ナビゲーションメニュー、カード一覧、ボタン配置などで活躍します。

方法3: Grid + place-items（セル内中央揃え）

難易度: ★★☆☆☆ | 記述量: 普通

Gridセル内で要素を中央揃えにする方法です。place-contentとの組み合わせで、より複雑なレイアウトに対応できます。

コード例

See the Pen Untitled by STELLAR INTER (@STELLAR-INTER) on CodePen. 

<div class="container">
  <div class="box">中央に配置</div>
</div>

.container {
  display: grid;
  place-content: center;  /* グリッド全体を中央に */
  place-items: center;    /* セル内で中央に */
  
  height: 100vh;
  border: 2px solid #333;
}

.box {
  padding: 20px;
  background: #9C27B0;
  color: white;
}

place-contentとplace-itemsの違い

  • place-content → グリッド全体（行列）の配置を制御
  • place-items → 各セル内でのアイテムの配置を制御

通常はplace-content: center;だけで十分ですが、複雑なグリッドレイアウトで各セル内の要素も中央揃えにしたい場合は、両方を組み合わせます。

複数要素の例

See the Pen Untitled by STELLAR INTER (@STELLAR-INTER) on CodePen. 

<div class="container">
  <img src="image1.jpg" alt="画像1">
  <p>説明テキスト</p>
</div>

.container {
  display: grid;
  grid-auto-flow: column;  /* 横方向に並べる */
  place-content: center;
  place-items: center;
  gap: 20px;
  height: 100vh;
  border: 2px solid #333;
}

メリット

  • グリッドレイアウトと組み合わせやすい
  • 複雑な配置パターンに対応可能

デメリット

  • 単純な中央揃えにはplace-contentだけで十分
  • 概念の理解がやや複雑

使用シーン

画像とテキストを組み合わせたカードレイアウトなど、複数要素を含むコンポーネントの中央揃えに適しています。

方法4: margin: auto（Flexbox併用）

難易度: ★☆☆☆☆ | 記述量: 少ない

親要素にFlexboxを指定し、子要素にmargin: auto;を設定する方法です。シンプルで直感的です。

コード例

See the Pen Untitled by STELLAR INTER (@STELLAR-INTER) on CodePen. 

<div class="container">
  <div class="box">中央に配置</div>
</div>

.container {
  display: flex;
  height: 100vh;
  border: 2px solid #333;
}

.box {
  margin: auto;  /* これだけで中央揃え */
  padding: 20px;
  background: #00BCD4;
  color: white;
}

仕組みの解説

Flexboxコンテナ内では、margin: auto;が上下左右すべての方向で自動調整されます。これにより、要素が自然に中央に配置されます。

横方向だけの中央揃え

.box {
  margin-inline: auto;  /* 左右だけ中央揃え（論理プロパティ） */
}

margin-inlineは2025年現在、全モダンブラウザで対応しています。margin-leftとmargin-rightを一括指定する論理プロパティです。

メリット

  • コードが直感的で理解しやすい
  • 子要素側で制御できる

デメリット

  • インライン要素には効かない（display: inline-block;が必要）
  • 親要素のサイズが明示的に必要 (px指定、vh指定など)

使用シーン

単一要素の中央揃えや、横方向だけの中央揃えに便利です。レスポンシブデザインで横幅を可変にしつつ中央に配置したい場合に活躍します。

方法5: Position + Transform（従来の定番）

難易度: ★★★☆☆ | 記述量: 多い

Flexbox登場以前から使われていた伝統的な方法です。古いブラウザ対応が必要な場合に使用します。

コード例

See the Pen Untitled by STELLAR INTER (@STELLAR-INTER) on CodePen. 

<div class="container">
  <div class="box">中央に配置</div>
</div>

.container {
  position: relative;
  height: 100vh;
  border: 2px solid #333;
}

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  padding: 20px;
  background: #FF5722;
  color: white;
}

仕組みの解説

  1. position: absolute; で絶対配置
  2. top: 50%; left: 50%; で要素の左上を中央に移動
  3. transform: translate(-50%, -50%); で要素自身の幅・高さの半分だけ戻す

メリット

  • IE10以降の古いブラウザでも動作
  • 親要素の高さが未指定でも機能する

デメリット

  • コード量が多い
  • 絶対配置なので他の要素との関係性が崩れる
  • レスポンシブ対応がやや複雑

使用シーン

モーダルウィンドウやオーバーレイ表示など、他の要素から独立した配置が必要な場合に適しています。

実践的な使い分けガイド

どのように使い分けるか?

やりたいこと おすすめ手法 理由
単一要素の中央揃え Grid + place-content 最短コード
複数要素を横並びで中央揃え Flexbox 柔軟性が高い
カード型レイアウト Flexbox 要素間隔の調整が簡単
モーダルウィンドウ Position + Transform 独立した配置が可能
レスポンシブ対応 Flexbox or Grid 可変レイアウトに強い

推奨プラクティス

新規プロジェクトではこの順で検討するのがおすすめ

  1. CSS Grid（place-content） → 単一要素の場合
  2. Flexbox → 複数要素や柔軟な配置が必要な場合
  3. Position + Transform → 絶対配置が必要な特殊ケース

参考リソース

ブラウザ対応状況（2025年1月時点）

  • Flexbox: 全モダンブラウザ対応（IE10+は部分対応）
  • CSS Grid: 全モダンブラウザ対応（IE11は部分対応）
  • place-content: Chrome 59+、Firefox 53+、Safari 11+、Edge 79+
  • gap（Flexbox）: Chrome 84+、Firefox 63+、Safari 14.1+、Edge 84+

注意事項
IE11以前のブラウザ対応が必要な場合は、FlexboxまたはPosition + Transformを使用してください。2025年現在、IEのサポートを継続している企業は減少傾向にありますが、プロジェクト要件を必ず確認しましょう。

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?