「CSSで中央揃えをしようとして、text-align: center;を書いたのになぜdivが動かないの？」「margin: 0 auto;を書いたのになぜ中央に寄らないの？」と悩んだことはありませんか。中央揃えは一見シンプルですが、対象がテキストなのか、画像なのか、divのような塊なのか、上下左右の中央なのかによって使うCSSが変わります。
現代のCSSで上下左右の中央揃えをするなら、まずはFlexboxのjustify-content: center;とalign-items: center;を覚えるのがおすすめです。この記事では、中央揃えの基本パターン、Flexboxで上下中央にする方法、Gridを使った短い書き方、中央揃えが効かない原因まで解説します。
忍者CODEマガジンは、未経験からでもプロのエンジニアを目指せるプログラミングスクール「忍者CODE」が運営しているプログラミング情報サイトです。
- プログラミングの効果的な学習方法
- プログラミング用語の解説
- エンジニアのキャリアに関する情報
など、プログラミングを始めたばかりの初学者に役立つ記事を幅広く公開しています。
CSSの中央揃えは「要素の種類」で変わる
CSSの中央揃えで最初に大事なのは、「何を中央にしたいのか」を切り分けることです。テキストを中央にするのか、divなどの塊を中央にするのか、上下左右の中央にするのかで、使うCSSは変わります。まずは次の表で判断しましょう。
| 中央にしたいもの | よく使うCSS | 向いている場面 |
|---|---|---|
| テキスト、インライン画像、リンク文字 | text-align: center; |
文章、見出し、ボタン内の文字 |
| 幅を持つdiv、カード、画像の外枠 | margin: 0 auto; |
コンテンツ幅を中央に置く |
| 横方向も縦方向も中央にしたい要素 | display: flex; |
ヒーロー、モーダル、カード内の配置 |
| 1つの要素を短いコードで中央にしたい | display: grid; |
単純な上下左右中央 |
| 要素を重ねて中央に置きたい | positionとtransform |
画像上のラベル、モーダル、オーバーレイ |
中央揃えが効かないときは、CSSが間違っているというより「対象に対して使う方法が違う」ケースが多いです。
方法1：テキストや画像はtext-align: center;で中央揃えする
テキストや、文章の流れに入っている画像・リンクを中央揃えしたい場合は、親要素にtext-align: center;を指定します。
<div class="text-center">
<p>中央揃えしたい文章です。</p>
<a href="#">詳しく見る</a>
</div>.text-center {
text-align: center;
}text-alignは、親要素の中にあるテキストやインライン要素の揃え方を指定するプロパティです。
文章やリンク文字を中央にしたい場合は、まずtext-align: center;を使います。
画像もtext-alignで中央にできる場合がある
画像のimgタグは、初期状態ではインライン要素のように扱われます。そのため、親要素にtext-align: center;を指定すると中央に寄せられることがあります。
<div class="image-wrap">
<img src="sample.jpg" alt="CSSで中央揃えした画像">
</div>.image-wrap {
text-align: center;
}ただし、画像にdisplay: block;を指定している場合は、次に紹介するmargin: 0 auto;を使う方が自然です。
text-alignは、divなどのブロック要素そのものを中央に動かす指定ではありません。中身の文字やインライン要素を揃える指定だと覚えましょう。
関連記事：「htmlのfigcaptionを中央寄せにする方法を解説」
方法2：divなどの塊はmargin: 0 auto;で中央揃えする
div、カード、コンテンツ幅のような「塊」を横方向の中央に置きたい場合は、margin: 0 auto;を使います。
<div class="card">
<h3>中央に置きたいカード</h3>
<p>幅を決めると、左右の余白で中央配置できます。</p>
</div>.card {
width: 320px;
margin: 0 auto;
padding: 24px;
background: #eef7f2;
}margin: 0 auto;は、左右の余白を自動で同じ幅にする指定です。幅が決まっている要素であれば、左右に均等な余白ができて中央に配置されます。
スマホ対応ではmax-widthとwidth: 100%;を組み合わせる
実務では、固定幅だけでなくmax-widthを使うと安全です。
.card {
max-width: 640px;
width: 100%;
margin: 0 auto;
padding: 24px;
}この書き方なら、PCでは最大640pxに収まり、スマホでは画面幅に合わせて縮みます。
block要素を横方向に中央揃えしたい場合は、幅の指定とmargin: 0 auto;をセットで考えましょう。
方法3：【おすすめNo.1】flexboxで上下左右中央にする
上下左右の中央揃えをしたい場合、最も扱いやすい方法の1つがFlexboxです。
Flexboxでは、親要素にdisplay: flex;を指定し、横方向の中央揃えにjustify-content: center;、縦方向の中央揃えにalign-items: center;を使います。
<div class="center-box">
<p>上下左右中央に配置されます</p>
</div>.center-box {
display: flex;
justify-content: center;
align-items: center;
min-height: 240px;
background: #f3f7fb;
}flexboxの中央揃えは、親要素にdisplay: flex;を指定するのがポイントです。
justify-contentは横方向、align-itemsは縦方向と覚える
初期状態のflexboxでは、子要素は横方向に並びます。このときは、次のように覚えるとわかりやすいです。
| プロパティ | 主な役割 | 中央揃えの値 |
|---|---|---|
justify-content |
横方向の位置を調整する | center |
align-items |
縦方向の位置を調整する | center |
厳密には、justify-contentは主軸、align-itemsは交差軸を調整します。flex-directionをcolumnに変えると、調整する向きの感覚が入れ替わるため注意しましょう。
ボタンやカードの中身を中央にする実務例
ボタンの中でアイコンと文字を中央に揃えたい場合もflexboxが便利です。
<a class="lesson-button" href="#">
<span>無料レッスンを見る</span>
</a>.lesson-button {
display: flex;
justify-content: center;
align-items: center;
min-height: 48px;
padding: 0 20px;
background: #1f7a8c;
color: #fff;
text-decoration: none;
}このように、ボタンの高さが変わっても中の文字を上下中央に保ちやすくなります。
方法4：【コード1行】Gridで中央揃えする
要素を1つだけ上下左右中央に置きたい場合は、CSS Gridを使う方法もあります。
<div class="grid-center">
<p>Gridで中央配置</p>
</div>.grid-center {
display: grid;
place-items: center;
min-height: 240px;
}place-items: center;は、align-itemsとjustify-itemsをまとめて指定するような書き方です。1つの子要素を中央に置きたいだけなら、非常に短く書けます。
place-content: center;を使う場合
place-content: center;は、Gridコンテナ内のコンテンツ全体を中央に寄せたいときに使えます。
.grid-content-center {
display: grid;
place-content: center;
min-height: 240px;
}単純に「中の要素を中央に置きたい」ならplace-items: center;、Gridの中身全体の配置を整えたいならplace-content: center;と考えると迷いにくいです。Gridの中央揃えは短く書けますが、複数要素の横並びや余白調整まで行う場合は、flexboxの方が意図を説明しやすいこともあります。
方法5：positionとtransformで重ねた要素を中央にする
画像の上にラベルを重ねたい、モーダルを画面中央に置きたい、といった場面ではpositionとtransformを使うことがあります。
<div class="hero-image">
<img src="sample.jpg" alt="中央に文字を重ねる背景画像">
<p class="hero-label">CSS Flexbox講座</p>
</div>.hero-image {
position: relative;
}
.hero-image img {
display: block;
width: 100%;
}
.hero-label {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}top: 50%;とleft: 50%;だけでは、要素の左上が中央に来ます。そこでtransform:translate(-50%, -50%);を使い、要素自身の半分だけ戻して、本当の中央に合わせます。重ねた要素を中央に置く場合は、親にposition: relative;、子にposition: absolute;を指定するのが基本です。
通常のレイアウトで上下中央にしたいだけなら、positionよりflexboxの方がシンプルです。重ねる必要がある場面だけpositionを検討しましょう。
よくあるCSSトラブル：中央揃えが効かない３大原因
中央揃えが効かないときは、まず次の３つを確認しましょう。
原因1：divにtext-alignをかけてしまっている
text-align: center;は、中のテキストやインライン要素を中央にする指定です。divそのものを中央に動かす指定ではありません。
.card {
width: 320px;
text-align: center;
}この場合、.cardの中の文字は中央になりますが、.card自体は中央に配置されません。
.card {
width: 320px;
margin: 0 auto;
}原因2：margin: 0 auto;を指定した要素にwidthがない
margin: 0 auto;は、左右の余白を自動で均等にする指定です。しかし、要素が親幅いっぱいに広がっていると、左右に余白が生まれません。
.card {
margin: 0 auto;
}.card {
max-width: 640px;
width: 100%;
margin: 0 auto;
}中央揃えが効かないときは、「text-alignで中身を揃えたいのか」「marginで箱そのものを動かしたいのか」を切り分けましょう。
原因3：flexbox（display:flex）を指定した親要素に「高さ」がない
display: flex; と align-items: center; を書いたのに上下中央にならない場合、親要素（外枠の箱）に高さが設定されていないことが最大の原因です。
CSSの仕様として、高さを指定しない場合、親要素の高さは「中身のコンテンツ（文字など）と同じ高さ」になります。 上下の余白（隙間）がゼロの状態なので、いくら「上下中央に揃えて」と指示しても、見た目は何も変わりません。
<div class="parent">
<p class="child">これだと上下中央になりません</p>
</div>.parent {
display: flex;
justify-content: center;
align-items: center;
/* 高さ（height）の指定がないため、子要素と全く同じ高さになってしまっている */
background: #f3f7fb;
}height や min-height を指定して、「子要素が動けるための縦のスペース」を作ってあげる必要があります。.parent {
display: flex;
justify-content: center;
align-items: center;
/* 解決策：親要素に十分な高さを指定する */
min-height: 300px;
background: #f3f7fb;
}中央揃えの方法を選ぶ実務チェックリスト
実際の制作では、次のように選ぶとスムーズです。
| やりたいこと | おすすめの方法 | 確認ポイント |
|---|---|---|
| 文章やリンク文字を中央にしたい | text-align: center; |
親要素に指定する |
| 幅を決めたカードを横中央にしたい | margin: 0 auto; |
widthまたはmax-widthを指定する |
| 上下左右中央にしたい | display: flex; |
親要素に高さがあるか確認する |
| 1つの要素を短く中央配置したい | display: grid; |
place-items: center;を検討する |
| 画像の上に文字を重ねたい | positionとtransform |
親にposition: relative;を指定する |
flexboxで上下中央にしているのに動かない場合、親要素に高さがないことがあります。heightやmin-heightを確認しましょう。
公式ドキュメントも確認する
中央揃えやflexboxの仕様を正確に確認したい場合は、MDN Web Docsの公式情報も参考になります。
- MDN Web Docs Flexboxの基本概念
- MDN Web Docs justify-content
- MDN Web Docs align-items
- MDN Web Docs Center an element
- MDN Web Docs place-content
- HTML・CSSを学んで自分だけのスキルを身につけたい
- HTML・CSSのスキルを身につけてwebクリエイターとして活躍したい
- サポートが充実しているプログラミングスクールを知りたい
そんな思いを持った方は忍者CODEのWeb制作コースがおすすめです！
忍者CODEは未経験からでもプロのエンジニアを目指せるオンラインプログラミングスク―ルです。
期間制限なく動画を視聴できるので、自分のペースで学習することができます！
まとめ：現代のコーディングはFlexboxでの中央揃えが便利
この記事では、CSSで中央揃えする方法を解説しました。中央揃えは、対象に合わせてtext-align、margin: 0 auto、Flexbox、Grid、positionを使い分けることが大切です。
- テキストやインライン要素は
text-align: center; - 幅のあるblock要素は
margin: 0 auto; - 上下左右中央は
display: flex;が扱いやすい - 単純な中央配置はGridの
place-items: center;も便利 - 重ねた要素の中央配置は
positionとtransformを使う
特に、Web制作でカード、ボタン、モーダル、ヒーローエリアを作るなら、flexboxの中央揃えは何度も使います。まずはdisplay: flex;、justify-content: center;、align-items: center;の3つをセットで覚えておきましょう。
