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

生徒

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

先生

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

生徒

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

先生

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

1. CSSで中央寄せをする方法とは？

Webデザインでは、ボタンや画像、文章を中央に配置する場面が多くあります。中央寄せをするだけで、画面全体の見た目が整い、ユーザーにとっても見やすくなります。中央寄せの方法は一つではなく、いくつかのやり方があります。

代表的なものは以下の3つです。

flexを使った中央寄せ
gridを使った中央寄せ
marginを使った中央寄せ

この3つの方法をしっかり理解しておけば、どんなレイアウトにも対応できるようになります。

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