CSSで横中央に揃える：文字とボックスの違いを確かめる

text-align:centerを書いたのに、箱が中央に動かない。これは、箱の中の文字と箱そのものを別の方法で配置するためです。通常の文書フロー、Flexbox、Gridの三つの例で比べます。

文字とインライン画像を中央にする
幅を制限した通常のブロックを中央にする
FlexboxとGridなら親で配置する
四つの方法を、同じ枠の中で試す
1. 指定を変えて、効く条件も確かめる
中央に見えない場合の確認順
参考にした公式資料
次に読む記事

文字とインライン画像を中央にする

index.html（body内の例・CSSはstyleタグ内）

<div class="text-center"><p>中央に置く文字</p><img src="photo.jpg" alt="説明用の写真"></div>
<style>.text-center { text-align: center; }</style>

text-alignは、ブロックコンテナ内のインライン内容の配置に使います。画像がdisplay:blockなら、この指定だけでは画像の箱自体は中央へ移動しません。

幅を制限した通常のブロックを中央にする

style.css（対象のクラスを付けた要素へ適用する断片）

.card { box-sizing: border-box; width: min(100%, 400px); margin-inline: auto; }
.photo { display: block; max-width: 100%; height: auto; margin-inline: auto; }

左右のauto marginに余った幅を振り分けます。幅100%の箱は左右に余る場所がないので、中央配置しても見た目が変わりません。

FlexboxとGridなら親で配置する

style.css（親要素へ適用する断片）

.flex-parent { display: flex; justify-content: center; }
.grid-parent { display: grid; justify-items: center; }

Flexboxのjustify-contentは主軸に沿った配置です。flex-directionをcolumnにすると主軸が変わるため、横中央を指定するならalign-itemsも検討します。配置する親に指定したか確認してください。

四つの方法を、同じ枠の中で試す

次の全体をindex.htmlに保存してブラウザで開きます。写真ファイルは不要です。点線が親の範囲、緑の箱が配置したい要素です。

index.html（単独で動く全体の例・CSSはstyleタグ内）

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>文字と箱の中央揃え</title>
  <style>
body { margin: 0; padding: 20px; font-family: sans-serif; line-height: 1.8; color: #17352e; }
.frame { max-width: 600px; border: 2px dashed #64748b; padding: 12px; margin-block: 12px; }
.card { box-sizing: border-box; width: min(100%, 200px); padding: 16px; background: #e0f2e9; border: 2px solid #164c3e; }
.text-only { text-align: center; }
.auto-margin { margin-inline: auto; }
.flex { display: flex; justify-content: center; }
.grid { display: grid; justify-items: center; }
  </style>
</head>
<body>
<h1>文字と箱を分けて比べる</h1>
<h2>1. 文字だけ中央</h2>
<div class="frame"><div class="card text-only">制作カード</div></div>
<h2>2. 通常のブロック</h2>
<div class="frame"><div class="card auto-margin">制作カード</div></div>
<h2>3. Flexboxの親で配置</h2>
<div class="frame flex"><div class="card">制作カード</div></div>
<h2>4. Gridの親で配置</h2>
<div class="frame grid"><div class="card">制作カード</div></div>

</body>
</html>

文字だけの中央揃えと、margin・Flexbox・Gridによる箱の中央配置を比較した実画面。 — 文字とボックスを、各手法で中央揃えした表示例です。

1番は箱が左に残り、文字だけが箱の中央に並びます。2〜4番は緑の箱の左右に同じだけ空きができれば成功です。箱の中の文字まで中央にしたい場合は、配置の指定に加えて.card { text-align: center; }を指定します。

指定を変えて、効く条件も確かめる

.cardのwidthを100%へ変えます。親の内側いっぱいに広がり、左右に配分する空きがなくなります。
widthを元へ戻し、.flexにflex-direction: column;を追加します。justify-contentの主軸が縦へ変わり、横中央ではなくなります。
その状態の.flexへalign-items: center;を追加します。横方向の配置が中央になります。

余白を何pxか手計算して左から押す方法では、親の幅が変わるたびに調整が必要です。この例では余った領域の配分をブラウザに任せるため、幅360pxと1200pxでも同じ配置ルールを使えます。