CSSの中央寄せを完全ガイド！初心者でもわかるflex・grid・marginの使い方

中央寄せのあらゆる方法（flex・grid・marginなど）

先生と生徒の会話形式で理解しよう

生徒

「先生、Webページで文字やボックスを中央に配置しているサイトをよく見ますけど、あれってどうやって作るんですか？」

先生

「良いところに気づきましたね。実は、CSSには『中央寄せ』を実現するためのいくつかの方法があります。代表的なのはflex、grid、そしてmarginを使う方法です。」

生徒

「flexやgridって聞いたことはあるんですけど、正直よく分かりません…。」

先生

「安心してください。とてもシンプルな考え方なので、これから一つずつ丁寧に見ていきましょう！」

1. CSSで中央寄せをする方法とは？基礎知識を解説

Webデザインにおいて、ボタンや画像、文章を画面の真ん中に配置する「中央寄せ」は、最も頻繁に使うテクニックの一つです。要素を中央に置くだけで、情報の優先順位が明確になり、スマートフォンでもPCでも見やすい洗練されたレイアウトになります。

2026年現在のモダンなWeb制作では、単に「真ん中に寄せる」だけでなく、レスポンシブ対応（画面サイズに合わせた自動調整）を考慮した手法が主流です。プログラミング未経験の方でも扱いやすい、代表的な3つの手法を比較してみましょう。

手法	主な特徴・使いどころ
Flexbox	もっとも汎用的。複数の要素を並べたり、上下左右を自由に調整できる。
CSS Grid	最新の書き方。わずか2行のコードで「完全な中央」を作れる。
Margin	古くからの定番。特定の幅を持つボックスを横方向に寄せたい時に最適。

例えば、以下のコードは最もシンプルな「箱の中の文字を中央に寄せる」サンプルです。まずは「親要素（外側）」に命令を出すという感覚を掴んでみましょう。


<style>
    .parent-box {
        display: flex;
        justify-content: center; /* 横方向の中央 */
        align-items: center;    /* 縦方向の中央 */
        height: 150px;
        background-color: #f8f9fa;
        border: 2px dashed #ccc;
    }
    .child-content {
        padding: 10px 20px;
        background-color: #007bff;
        color: white;
        border-radius: 5px;
    }
</style>

<div class="parent-box">
    <div class="child-content">
        中央に配置されたボタン風要素
    </div>
</div>

ブラウザ表示

このように、CSSには複数の「中央寄せ」の武器があります。初心者の方はまず「何でも中央にできるFlexbox」から覚え、慣れてきたら「コードが短いGrid」や「手軽なMargin」を使い分けるのが上達の近道です。それでは、具体的な使い道を詳しく見ていきましょう。

2. flexを使った中央寄せ

まずは、flex（フレックスボックス）を使った中央寄せです。flexは「要素を横や縦に並べる仕組み」で、中央寄せをとても簡単に実現できます。


<style>
.container-flex {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    background: lightblue;
}
.box {
    width: 100px;
    height: 100px;
    background: orange;
}
</style>

<div class="container-flex">
    <div class="box">中央</div>
</div>

ブラウザ表示

justify-content: center;は「横方向の中央寄せ」、align-items: center;は「縦方向の中央寄せ」を意味します。この2つを組み合わせれば、ボックスを真ん中にピタッと配置できます。

3. gridを使った中央寄せ

次に、grid（グリッドレイアウト）を使った中央寄せです。gridは「格子状のレイアウト」を作る仕組みですが、中央寄せにもとても便利です。


<style>
.container-grid {
    display: grid;
    place-items: center;
    height: 200px;
    background: lightgreen;
}
.box {
    width: 100px;
    height: 100px;
    background: tomato;
}
</style>

<div class="container-grid">
    <div class="box">中央</div>
</div>

ブラウザ表示

place-items: center;を使えば、縦横ともに中央に配置できます。flexよりも短いコードで書けるのが特徴です。

4. marginを使った中央寄せ

最後に紹介するのは、margin（余白）を使った中央寄せです。古くから使われている方法で、特に「横方向の中央寄せ」でよく使われます。


<style>
.box-margin {
    width: 200px;
    margin: 0 auto;
    background: pink;
    text-align: center;
}
</style>

<div class="box-margin">横方向の中央寄せ</div>

ブラウザ表示

margin: 0 auto;と書くことで、左右の余白が自動的に調整されて要素が中央に配置されます。ただし、この方法は縦方向の中央寄せには使えません。

5. テキストを中央寄せする方法

要素そのものではなく、文字やテキストを中央寄せしたいときもあります。その場合は、text-align: center;を使います。


<style>
.text-box {
    width: 300px;
    border: 1px solid #333;
    text-align: center;
    padding: 20px;
}
</style>

<div class="text-box">この文字は中央に寄せられています</div>

ブラウザ表示

テキストの場合はtext-align: center;がシンプルでおすすめです。