CSSでボックスの中身を中央に配置する方法を初心者向けに解説！text-alignとmargin autoの使い方

ボックスの中身を中央に配置する方法（text-align・margin auto）

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

生徒

「先生、CSSでボックスの中の文字や画像を中央に配置する方法はありますか？」

先生

「はい、主に2つの方法があります。文字やインライン要素にはtext-align、ブロック要素にはmargin: autoを使う方法です。」

生徒

「それぞれ具体的にどうやって使うんですか？」

先生

「それでは、順番に基本から見ていきましょう。」

1. text-alignで文字やインライン要素を中央に配置する方法

文字や画像などのインライン要素を中央に配置したいときは、親要素にtext-align: center;を指定します。text-alignは文字や小さな要素の横方向の配置を指定するプロパティです。左右の余白を自動で調整して中央に配置するイメージです。


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

<div class="text-center-box">
    中央に配置された文字
</div>

ブラウザ表示

2. margin: autoでブロック要素を中央に配置する方法

ブロック要素（divや画像など）を横方向の中央に配置したい場合は、margin-left: auto; margin-right: auto;を指定します。略してmargin: auto;と書くこともできます。これは左右の余白を自動で調整して中央に置く仕組みです。


<style>
    .block-center-box {
        width: 200px;
        height: 50px;
        background-color: lightcoral;
        margin: 0 auto;
        text-align: center;
        line-height: 50px;
    }
</style>

<div class="block-center-box">
    ブロック要素中央
</div>

ブラウザ表示

3. 上下方向も中央に配置したい場合

上下方向も中央に配置したい場合は、行の高さに合わせてline-heightを使う簡単な方法があります。また、より柔軟に中央揃えしたい場合は、まだ習っていませんが将来的にフレックスボックスを学ぶと便利です。ここでは基本のtext-alignとmargin: autoを使った中央配置を理解しておくことが重要です。