💡 記事の下にエディタを用意しています。壊してもOK！
更新日: 2025年3月1日
CSSで文字を中央寄せする方法｜text-align center
📌
結論
text-align: center でテキストを中央寄せできます
📝 実際のコードはこちら
h1 { text-align: center; }text-alignの値
| 値 | 効果 | 使いどころ |
|---|---|---|
left | 左寄せ（デフォルト） | 通常のテキスト |
center | 中央寄せ | 見出し、キャッチコピー |
right | 右寄せ | 日付、署名 |
justify | 両端揃え | 印刷物風のレイアウト |
テキストの中央寄せ vs ブロック要素の中央寄せ
text-align はテキスト（インライン要素）の位置を変えます。ブロック要素自体を中央に配置したい場合は別の方法が必要です。
| 対象 | 方法 |
|---|---|
| テキスト | text-align: center |
| ブロック要素 | margin: 0 auto |
| Flex子要素 | justify-content: center |
まとめ
・テキストの中央寄せはtext-align: center
・ブロック要素は margin: 0 auto で中央配置
・用途に応じて使い分ける
演習で試してみよう
h1を中央寄せにしてみましょう。🧪 ここで試せます ─ 壊しても大丈夫！
下のエディタで実際にコードを書いて、すぐにプレビューで確認できます。何度でもやり直せるので、思い切って色々試してみてください。
■ 演習
h1を中央寄せにしてください。
詰まったらヒント
text-align: center を使います。