Figmaのデザインを見ながら模写コーディングをしているとき、justify-content: centerを指定しているのに、要素が思った位置に来ないことがありました。
たとえば、ボタンに次のようなCSSを指定していました。
.help-button {
width: 192px;
height: 62px;
display: inline-flex;
justify-content: center;
align-items: center;
margin: 0 auto;
}justify-content: centerもalign-items: centerも指定しています。
それなのに、ボタン自体は中央に配置されませんでした。
別の場所では、3つのアイコンを中央に並べるためにjustify-contentだけでなく、親要素の幅やgap、子要素の幅まで調整する必要がありました。
ここで混乱していたのが、**「親要素自身を中央にすること」と「親要素の中にある子要素を中央にすること」**です。
justify-content: centerが何を動かしているのかを理解すると、Flexboxの中央揃えがかなり整理しやすくなります。
justify-content: centerは何を中央にする？
justify-contentは、Flexコンテナの子要素を主軸方向に配置するプロパティです。
そのため、justify-content: centerを指定した要素自身が中央に移動するわけではありません。
Flexコンテナの中にある子要素を動かす
たとえば、次のHTMLがあるとします。
<div class="parent">
<div class="child">item</div>
</div>CSSはこちらです。
.parent {
width: 300px;
display: flex;
justify-content: center;
}このときjustify-content: centerによって中央に配置されるのは、.parentではなく**中にある.child**です。
.parentはFlexコンテナ、.childはFlexアイテムになります。
つまり、
「justify-contentを書いた要素を中央にする」のではなく、「justify-contentを書いた要素の中身を動かす」
と考えると分かりやすくなります。
ボタンの文字が中央でもボタンは中央とは限らない
今回のボタンも同じでした。
.help-button {
width: 192px;
height: 62px;
display: flex;
justify-content: center;
align-items: center;
}ここで中央にしているのは、ボタンの中にある文字です。
ボタンそのものをページや親要素の中央に配置したいなら、さらに外側との関係を考える必要があります。
justify-contentが効いていないのではなく、そもそも動かそうとしている対象が違っていたわけです。
Flexコンテナ自身を中央にする方法
Flexコンテナの中身ではなく、Flexコンテナそのものを中央にしたい場合は、別の方法で配置します。
方法はいくつかありますが、幅を指定したブロックレベルの要素ならmargin: 0 autoが使えます。
justify-contentとmargin: 0 autoは役割が違う
次のCSSを見てみます。
.parent {
width: 300px;
display: flex;
justify-content: center;
margin: 0 auto;
}一見すると「中央揃えの指定が2つある」ように見えますが、それぞれ対象が違います。
justify-content: centerは、.parentの中にある子要素を中央へ配置しています。
一方、
margin: 0 auto;は、左右の余白を自動で割り振ることで、.parent自身を利用可能な横幅の中央へ配置しています。
つまり、このCSSでは「外側の中央」と「内側の中央」を別々に指定しています。
中央揃えで迷ったときは、まずどの箱を動かしたいのかを見ることが重要です。
親要素をFlexboxにする方法もある
中央にしたい要素のさらに親をFlexコンテナにする方法もあります。
.wrapper {
display: flex;
justify-content: center;
}<div class="wrapper">
<div class="parent">...</div>
</div>この場合、.wrapperから見れば.parentは子要素です。
そのため、.wrapperのjustify-content: centerによって.parentを中央にできます。
同じjustify-contentでも、どの要素に指定するかによって動く対象が変わるということです。
justify-contentで中央揃えできないときの確認ポイント
justify-content: centerを指定しても思った配置にならない場合は、プロパティを追加する前にFlexboxの構造を確認すると原因を探しやすくなります。
特に、justify-contentとalign-itemsの方向は覚え方に注意が必要です。
justify-contentとalign-itemsは軸が違う
通常のFlexboxでは、
.container {
display: flex;
justify-content: center;
align-items: center;
}とすると、flex-directionの初期値がrowなので、
justify-content：横方向align-items：縦方向
の配置を調整します。
ただし、これは常に「justify-content＝横」という意味ではありません。
.container {
display: flex;
flex-direction: column;
}とすると、主軸が縦方向になります。
この場合、justify-contentは縦方向、align-itemsは横方向を調整します。
そのため、横か縦かではなく、主軸と交差軸で考えるほうが正確です。
親の幅や子要素のサイズも確認する
複数の要素を並べる場合は、justify-content: centerだけではFigmaと同じ見た目にならないこともあります。
たとえば、
.services {
display: flex;
justify-content: center;
width: 566px;
gap: 130px;
}
.service {
width: 102px;
flex-shrink: 0;
}では、中央揃えだけでなく、親要素の幅・子要素の幅・要素同士の間隔も最終的な配置に影響します。
中央に揃っていても、gapが違えば見た目は変わります。
justify-contentが効いていないように感じたら、**中央にしたいのは親か子か、Flexboxを指定している場所、flex-direction、親の利用可能なスペース、子要素の幅やgap**を順番に確認すると原因を切り分けやすくなります。
【まとめ】中央揃えは「何を動かすか」から考える
justify-content: centerは、Flexコンテナそのものを中央にするCSSではありません。
Flexコンテナの中にある子要素を、主軸方向の中央に配置するプロパティです。
今回、中央揃えで苦戦した一番の原因は、CSSが効いていなかったことではなく、親要素自身の配置と、その中にある子要素の配置を同じ問題として考えていたことでした。
justify-contentは子要素の配置、margin: 0 autoは条件が合えば要素自身の左右中央配置に使えます。また、さらに外側の親をFlexコンテナにして、その子要素として中央に配置する方法もあります。
CSSで中央揃えがうまくいかないとき、すぐ別のプロパティを追加するのではなく、
「今、中央にしたいのはどの要素？」
と考えてみる。
それだけでも、Flexboxで起きていることをかなり整理しやすくなります。