揃えと配置｜中央寄せができない理由

「中央に寄せたい」ときに、要素そのものを動かそうとして失敗するのがよくあるパターンです。中央揃えは親の設定です。ここを一度理解すれば、配置で悩む時間はほぼなくなります。

揃えは親が決める

親ボックスは、子をどの位置に置くかを縦・横それぞれで指定できます。並べ方（縦積み／横並び）と組み合わせて、配置が決まります。

効かないときの確認順

中央揃えを設定したのに変わらない場合、原因はほぼ次の3つです。上から順に確認すると、たいてい2つ目までで見つかります。

2つ目が最頻出です。親ボックスの幅が中身に合わせた状態だと、そもそも余白がないので中央に寄りようがありません。親の幅を可変（親に合わせる）にすると解決します。サイズの話はサイズの決め方で詳しく扱います。

両端に配置したいとき

ヘッダーのように「ロゴは左、メニューは右」という配置は、位置を1つずつ指定するのではなく「両端に配置する」設定を使います。要素の数や幅が変わっても崩れません。

次は、配置と並んで崩れの原因になりやすい余白です。