HTMLで文字を中央へ置きたいときは、中央にしたい対象によってCSSを使い分けます。文字だけを横方向へそろえるならtext-align: center;、ボックスの中で縦横とも中央にするならFlexboxまたはGridが分かりやすい方法です。
「コードを書いたのに中央にならない」という場合は、文字ではなく要素そのものを動かそうとしていることがよくあります。この記事では、変更前の状態からコードを追加し、表示結果がどう変わるかを初心者向けに順番に解説します。
中央寄せは対象に合わせて方法を選ぶ
最初に、よく使う4つの方法を整理します。似て見えますが、動かしている対象が違います。
- 文字やインライン要素を横中央：
text-align: center; - 幅のあるブロック要素を横中央：
margin-inline: auto; - 子要素を縦横中央：Flexboxの
justify-contentとalign-items - 子要素を縦横中央：Gridの
place-items: center;
まずは「何を中央にしたいのか」を確認してください。この判断ができると、中央寄せで迷いにくくなります。
文字を横方向の中央にする
見出しや段落の文字を横方向へ中央寄せする場合は、CSSのtext-alignプロパティを使います。centerは「行の中にある文字や画像を中央へそろえる」という値です。
変更前のHTMLを用意する
index.htmlへ、見出しと段落を入れたボックスを作ります。
<section class="intro">
<h2>HTML入門講座</h2>
<p>基本のタグから順番に学びます。</p>
</section>CSSを追加する前は、見出しも段落も通常どおり左側から表示されます。
text-align: centerを追加する
文字を囲んでいる.introへ、次のCSSを追加してください。
.intro {
padding: 2rem;
background-color: #eef6ff;
text-align: center;
}保存してブラウザを再読み込みすると、見出しと段落の文字がボックスの横中央へ移動します。text-alignは子要素へ受け継がれるため、親の.introへ一度指定すれば中の文字をまとめて中央にできます。
1つの段落だけを中央にしたい場合は、その段落へクラスを付けて指定します。
<p class="center-text">この文章だけ中央にします。</p>.center-text {
text-align: center;
}なお、text-align: center;を指定しても、段落のボックス自体の幅は変わりません。動くのはボックス内の文字です。
ブロック要素そのものを横中央にする
カードや記事本文など、幅のあるブロック要素そのものを中央へ置く場合は、左右のマージンをautoにします。ここでは、横書き・縦書きの方向に対応しやすいmargin-inline: auto;を使います。
<article class="card">
<h2>プロフィール</h2>
<p>Web制作を学習しています。</p>
</article>次のCSSでカードの最大幅を決め、左右に残った余白を同じ量へ分けます。
.card {
width: min(100% - 2rem, 32rem);
margin-inline: auto;
padding: 2rem;
border: 1px solid #cbd5e1;
border-radius: 1rem;
}変更後は、カード全体がページの横中央へ配置されます。カード内の文字も中央にしたい場合は、さらにtext-align: center;を追加してください。
width: 100%;の要素は横幅をすべて使うため、左右に分ける余白がありません。max-widthや上のwidth: min(...)で幅を制限することが、autoを効かせるポイントです。
ボックス内で文字を縦横中央にする
高さのあるカード、ヒーローエリア、空の状態を示すメッセージなどでは、文字を横だけでなく縦方向にも中央へ置きたいことがあります。この場合はFlexboxかGridを使うと、文字量が変わっても調整しやすくなります。
Flexboxで縦横中央にする
まず、中央に置きたい文章をボックスで囲みます。
<div class="message-box">
<p>お知らせはありません。</p>
</div>CSSを追加する前は、文章がボックスの左上に表示されます。親要素の.message-boxへ次の指定を追加します。
.message-box {
display: flex;
justify-content: center;
align-items: center;
min-height: 15rem;
padding: 2rem;
border: 1px solid #cbd5e1;
text-align: center;
}display: flex;で子要素を並べる仕組みを作り、justify-content: center;で横方向、align-items: center;で縦方向へ中央にします。変更後は、文章がボックスの中央に配置されます。
縦方向の中央を目で確認するには、親要素に高さが必要です。文章が増えたときに切れないよう、固定のheightではなくmin-heightを使うと安全です。
Flexboxの主軸と交差軸を理解する
Flexboxでは、justify-contentは主軸、align-itemsは主軸と交差する方向へ要素をそろえます。初期値のflex-direction: row;では、主軸が横方向です。
flex-direction: column;へ変えると主軸が縦方向になるため、justify-contentが縦、align-itemsが横を担当します。プロパティ名だけで横・縦と覚えず、並ぶ方向を先に確認しましょう。
Gridならplace-itemsで縦横中央にできる
1つの子要素をシンプルに縦横中央へ置くなら、CSS Gridのplace-itemsも便利です。HTMLはFlexboxの例と同じものを使えます。
.message-box {
display: grid;
place-items: center;
min-height: 15rem;
padding: 2rem;
border: 1px solid #cbd5e1;
text-align: center;
}place-items: center;は、Gridの行方向と列方向の配置をまとめて中央にします。単独のアイコンやメッセージを中央へ置く場合は、Flexboxより短く書けます。
複数の要素を横並びにしたい場合や、順序・折り返しも調整したい場合はFlexboxが向いています。マス目を使ったレイアウトの中で中央にしたい場合はGridを選ぶと自然です。
実用例で中央寄せを確認する
ページ見出しを中央にする
ページのタイトルと短い説明を中央にする例です。文字をそろえるだけなのでtext-alignを使います。
<header class="page-header">
<h1>Web制作ポートフォリオ</h1>
<p>制作したサイトと学習記録を紹介します。</p>
</header>.page-header {
padding-block: 4rem;
padding-inline: 1rem;
text-align: center;
}
.page-header p {
max-width: 40rem;
margin-inline: auto;
}タイトルと説明文の文字は中央にそろい、説明文のボックスも最大幅40remで中央に置かれます。長い文章まで画面いっぱいに中央揃えすると読みづらいため、短い導入文に使うのが向いています。
ボタンを横並びで中央にする
複数のリンクやボタンを中央へ並べる場合はFlexboxを使います。画面が狭いときに折り返せるよう、flex-wrap: wrap;も付けます。
<div class="actions">
<a href="#profile">プロフィールを見る</a>
<a href="#contact">問い合わせる</a>
</div>.actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
}
.actions a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 3rem;
padding-inline: 1.25rem;
}親の.actionsがボタン同士を中央へ集め、各リンク内のFlexboxが文字をボタンの縦横中央へそろえます。役割を分けて考えると理解しやすいでしょう。
centerタグを使わずCSSで指定する
古いHTMLでは<center>タグを見かけることがあります。しかし、centerタグは現在のHTMLでは非推奨です。
HTMLは見出しや段落など内容の意味を表し、配置はCSSで指定します。既存のcenterタグは適切なdivやpへ置き換え、クラスから中央寄せを設定してください。
<!-- 非推奨の書き方 -->
<center>お知らせ</center>
<!-- 現在の書き方 -->
<p class="notice">お知らせ</p>.notice {
text-align: center;
}中央寄せできないときの確認点
- text-alignで要素自体を動かそうとしている：文字には
text-align、幅のあるブロックにはmargin-inline: autoを使います。 - marginのautoを指定した要素に余白がない：
max-widthなどで親より狭い幅を作ります。 - align-itemsを通常のブロックへ指定している：親へ
display: flexまたはdisplay: gridを設定します。 - 縦中央を確認できる高さがない：親に
min-heightや上下の余白を設定します。 - Flexboxの方向が想定と違う：
flex-directionを確認し、主軸と交差軸を整理します。 - 別のCSSに上書きされている：開発者ツールで最終的な
text-alignやdisplayを確認します。
クラス名の先頭に付けるピリオドや、波括弧、セミコロンの抜けも確認してください。修正後はファイルを保存し、ブラウザを再読み込みします。
スマートフォンと読みやすさも確認する
中央寄せは見出し、短い説明、ボタン、アイコンなどで効果的です。一方、何行も続く本文を中央揃えにすると、行の開始位置がばらばらになり読み進めにくくなります。
長い本文は左揃えを基本にし、中央寄せは短い情報へ限定してください。画面幅を狭くしたときに文字が枠からはみ出さないか、ボタンが折り返されるか、拡大しても固定高さで切れないかも確認します。
まとめ
文字を横中央へそろえるならtext-align: center;、ブロック要素そのものを横中央へ置くならmargin-inline: auto;を使います。ボックスの中で縦横中央にする場合は、Flexboxのjustify-contentとalign-items、またはGridのplace-itemsが便利です。
まず「文字」「要素」「ボックス内の子要素」のどれを動かしたいかを決めましょう。対象に合う方法を選び、パソコンとスマートフォンの両方で表示結果を確認してください。