CSSでレイアウトを作っていると、「文字を真ん中に置きたい」「ボックスを画面の中央に配置したい」という場面がよくあります。
ところが、text-align: center;を指定したのに要素が動かなかったり、margin: 0 auto;が効かなかったりして困ることもあります。
CSSの中央寄せで大切なのは、何を中央に配置したいのかによって使う方法が異なることです。
この記事では、文字・ブロック要素・上下左右の中央寄せをそれぞれ解説し、中央寄せが効かないときの確認ポイントも紹介します。
CSSで文字を中央寄せする方法
文章や見出しなどの文字を中央寄せしたい場合は、基本的にtext-alignを使用します。
中央寄せの中でもシンプルな方法なので、まずはここから覚えておくと使いやすいです。
text-align: centerで文字を中央にする
HTMLを次のように用意します。
<p class="text-center">中央に表示する文章です。</p>CSSでは、次のように指定します。
.text-center {
text-align: center;
}これだけで文章が中央に配置されます。
text-alignでは中央以外にも、次のような配置を指定できます。
| 値 | 配置 |
|---|---|
left | 左寄せ |
center | 中央寄せ |
right | 右寄せ |
text-align: center;は、文字やインライン要素を水平方向に中央寄せするときに使うのが基本です。
見出しや画像にも使える場合がある
text-align: center;は文字だけでなく、親要素の中にあるインライン要素やinline-blockの要素にも影響します。
たとえば画像を囲んでいる親要素に指定すると、画像を中央に配置できる場合があります。
.image-wrap {
text-align: center;
}ただし、すべての要素そのものを中央へ移動させるCSSではありません。
ブロック要素自体を中央にしたい場合は、別の方法が必要になります。
ブロック要素を左右中央に配置する方法
divなどで作ったボックス自体を中央へ配置したい場合、よく使われるのがmarginです。
text-alignとの違いを理解しておくと、「centerを書いたのに動かない」という混乱も減らせます。
margin: 0 autoで中央寄せする
たとえば次のようなボックスを作ります。
<div class="box">中央に配置するボックス</div>CSSはこちらです。
.box {
width: 300px;
margin: 0 auto;
}左右のmarginをautoにすることで、余っているスペースが左右に分配され、ボックスが中央に配置されます。
margin: 0 auto;は、幅が決まっているブロック要素を左右中央に配置するときの基本的な方法です。
margin: 0 autoが効かない場合
よくあるのが、margin: 0 auto;を書いたのに中央寄せされないケースです。
たとえば要素が親要素と同じ横幅まで広がっている場合、左右に分配する余白がありません。
.box {
width: 100%;
margin: 0 auto;
}この場合、すでに横幅いっぱいなので見た目は変化しません。
width: 300px;やmax-width: 600px;など、親要素より小さな幅を設定できているか確認するのがポイントです。
Flexboxで上下左右を中央寄せする方法
要素を横方向だけでなく、上下方向も含めて中央に配置したい場合はFlexboxが便利です。
中央に配置したい要素の親要素にCSSを指定することで、比較的シンプルにレイアウトできます。
justify-contentとalign-itemsを使う
HTMLは次のようにします。
<div class="container">
<div class="item">中央の要素</div>
</div>CSSでは親要素にFlexboxを指定します。
.container {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
}ここで重要なのが、次の3つです。
display: flex;：Flexboxを有効にするjustify-content: center;：主軸方向を中央にするalign-items: center;：交差軸方向を中央にする
初期状態のFlexboxでは、これによって左右・上下の両方で中央に配置できます。
上下中央にするには高さが必要
align-items: center;を書いているのに上下中央にならない場合は、親要素の高さも確認します。
親要素に中央へ移動できるだけの高さがなければ、見た目に変化が出ないことがあります。
.container {
display: flex;
justify-content: center;
align-items: center;
min-height: 300px;
}heightやmin-heightなどを使って領域を確保すると、上下中央になっていることを確認しやすくなります。
CSSで中央寄せが効かないときの確認ポイント
中央寄せのCSS自体は難しくありませんが、対象となる要素の性質や親要素との関係によって結果が変わります。
うまくいかないときはCSSを次々追加するより、何を中央寄せしようとしているのかを最初に確認するほうが原因を見つけやすくなります。
中央寄せする対象に合ったCSSか確認する
まず、中央にしたい対象によって方法を整理してみましょう。
| 中央寄せしたいもの | 主な方法 |
|---|---|
| 文字 | text-align: center; |
| 幅のあるブロック要素 | margin: 0 auto; |
| Flexbox内の要素 | justify-content: center; |
| 上下左右の中央 | Flexbox＋align-items: center; |
「中央寄せ」という見た目は同じでも、対象によって使うプロパティが違うことが分かります。
text-align: center;でdiv自体を移動させようとしていないかなど、まずは指定方法を確認してみましょう。
親要素と子要素の関係も確認する
Flexboxで特に間違えやすいのが、CSSを指定する場所です。
.container {
display: flex;
justify-content: center;
align-items: center;
}この場合、中央に配置されるのは.container自身ではなく、その中にある子要素です。
また、別のCSSによってdisplayやmarginなどが上書きされている場合もあります。
中央寄せが効かないときは、
- 対象の要素は何か
- 親要素はどれか
- 横幅や高さが確保されているか
- 別のCSSで上書きされていないか
を順番に確認すると、原因を探しやすくなります。
【まとめ】CSSの中央寄せは対象によって方法を使い分けよう
CSSで中央寄せするときは、すべてを同じ方法で中央にするわけではありません。
基本的には、
- 文字なら
text-align: center; - ブロック要素なら
margin: 0 auto; - 上下左右ならFlexbox
という違いを覚えておくと分かりやすいです。
特に「中央寄せが効かない」ときは、新しいCSSを追加する前に、中央にしたいものが文字なのか、要素そのものなのか、子要素なのかを確認してみてください。
中央寄せはWeb制作で何度も使う基本的なレイアウトです。それぞれのCSSが何に作用しているのか理解しておけば、中央に配置できないときの原因も見つけやすくなります。