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

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

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

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

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

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

<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（フレックスボックス）を使った中央寄せ

2. flex（フレックスボックス）を使った中央寄せ

初心者の方に最もおすすめな方法が、Flexbox（フレックスボックス）を使った中央寄せです。 Flexboxは、親要素（外側の箱）に「たった3行の魔法の言葉」を記述するだけで、中にある要素を自由自在に整列させることができる非常に便利な仕組みです。

プログラミング未経験の方でも、まずはこのパターンを覚えておけば、Webサイト制作の現場で困ることはありません。 縦方向と横方向、どちらも真ん中に配置する最もシンプルで確実なコードを見てみましょう。

<style>
/* 外側の親要素（コンテナ）の設定 */
.flex-container {
    display: flex;             /* flexboxを使う宣言 */
    justify-content: center;    /* 横方向の中央寄せ */
    align-items: center;        /* 縦方向の中央寄せ */
    height: 250px;              /* 高さを指定して分かりやすく */
    background-color: #f0f0f0;  /* 背景色：薄いグレー */
    border: 2px dashed #ccc;   /* 枠線 */
}

/* 内側の子要素（中身のボックス）の設定 */
.orange-box {
    width: 120px;
    height: 120px;
    background-color: #ff9800;  /* オレンジ色 */
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    border-radius: 8px;         /* 角を丸く */
}
</style>

<div class="flex-container">
    <div class="orange-box">真ん中</div>
</div>

上記のコードで重要なのは、親要素（.flex-container）に指定した3つのプロパティです。

• display: flex; … 「この箱の中でflexboxのルールを使います」という合図です。
• justify-content: center; … 中にある要素を左右（水平方向）の真ん中に移動させます。
• align-items: center; … 中にある要素を上下（垂直方向）の真ん中に移動させます。

これまでの古い書き方では、縦の中央寄せは非常に複雑な計算が必要でしたが、Flexboxの登場により「上下左右ぴたっと真ん中」に配置することが驚くほど簡単になりました。 画像やボタン、テキストなど、どんな要素でもこの方法で中央に配置できるため、現代のWebデザインにおける「基本中の基本」と言えるテクニックです。

3. CSS Grid（グリッド）で一瞬！最も簡単な中央寄せ

3. CSS Grid（グリッド）で一瞬！最も簡単な中央寄せ

「flexboxよりもさらにコードを短くしたい」という方におすすめなのが、CSS Grid（グリッドレイアウト）を使った方法です。Gridは本来、複雑なタイルのようなレイアウトを作るための仕組みですが、実は「たった2行」で要素を真ん中に配置できる最強の時短テクニックでもあります。

プログラミング未経験の方でも直感的に理解しやすいのが特徴で、親要素（外枠）に対して「中身を中央に置いてね」と1つ命令を出すだけで、上下左右ピッタリ真ん中に整列します。

<style>
.container-grid {
    display: grid;          /* グリッドレイアウトを有効にする */
    place-items: center;    /* 上下左右のちょうど真ん中に配置する */
    height: 200px;
    background-color: #e3f2fd; /* 薄い青色の背景 */
    border: 2px dashed #0d6efd;
}
.box {
    width: 100px;
    height: 100px;
    background-color: #ff6b6b; /* トマト色のボックス */
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}
</style>

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

この方法のポイントは、place-items: center; という魔法の1行です。これだけで、子要素が何個あっても、あるいは画像やテキストであっても、自動的に領域のセンターへ導いてくれます。

最近のWeb制作現場では、この「Gridを使った中央寄せ」がその記述のシンプルさから主流になりつつあります。まずはこの形をテンプレートとして覚えておくと、レイアウト崩れに悩まされることが格段に減るはずですよ。

4. marginを使った中央寄せ

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. テキストを中央寄せする方法

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;がシンプルでおすすめです。

6. どの中央寄せを使えばいい？

6. どの中央寄せを使えばいい？

ここまで紹介した方法には、それぞれ得意な場面があります。

• flex → ボックス全体を縦横中央に寄せたいとき
• grid → 短いコードで縦横中央に寄せたいとき
• margin → 横方向だけ中央に寄せたいとき
• text-align → 文字を中央に寄せたいとき

実際のWebページでは、場面によってこれらを使い分けるのがポイントです。