なぜ縦の中央揃えは難しいのか
横方向の中央揃えはtext-alignやmarginで比較的簡単に実現できますが、縦方向はそうはいきません。要素の高さや親の高さが決まっていないと、何を基準に中央へ置くかが定義できないためです。
「揃わない」と感じるケースの多くは、親要素に高さが指定されていない、あるいは中身の高さに合わせて親が伸縮しているために、中央揃えの効果が見た目に現れていない状態です。
flexboxで中央に揃える
もっとも手軽なのはflexboxです。親にflexを指定し、主軸と交差軸の両方を中央寄せにすれば、子要素は縦横とも中央に配置されます。子要素の数や高さが変わっても自動的に中央を保ちます。
ただし縦中央が見た目に効くには、親要素に十分な高さが必要です。高さがコンテンツと同じだと、中央に寄せても見た目は変わりません。高さを指定するか、画面の高さに合わせる単位を使って親を広げてください。
症状別チェック表
要素を上下中央に揃えたいのに揃わないは、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。
確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。
- 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
- 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
- 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
- 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する
gridとtransformの選択肢
gridでも中央揃えは簡単です。親にgridを指定し、配置を中央にするだけで子が縦横中央に置かれます。複数要素を格子状に並べつつ中央化したいときに向きます。
flexやgridが使えない場面では、絶対配置とtransformを組み合わせる古典的な方法があります。要素を親の中央に配置し、自身のサイズの半分だけ戻すことで中央を実現します。要素の高さが可変でも対応できるのが利点です。
中央揃えを確実にする手順
次の順で確認すると原因を切り分けやすくなります。
- 親要素に高さが指定されているか、または十分な高さがあるか確認する
- 親にflexを指定し、主軸と交差軸を中央寄せにする
- 格子状に並べたい場合はgridで中央配置を指定する
- flex/gridが使えない場合は絶対配置とtransformを使う
- 親の高さが中身と同じになっていないか改めて確認する
共有URLで見え方を検証する
中央揃えはフォントの行間やパディング、画面の高さによって微妙にずれて見えることがあります。複数の環境で同じ成果物を見比べると、本当に中央に見えているかを判断しやすくなります。
ギガサイト便に検証用のHTMLをドロップすれば共有URLが発行され、関係者が各自の画面サイズで中央揃えの見え方を確認できます。手法を変えた版を同じURLのまま差し替えれば、flexとtransformなどの結果を同条件で比較しやすくなります。
よくある質問
flexで中央寄せにしたのに揃いません。
親要素の高さが中身と同じだと、中央に寄せても見た目が変わりません。親に高さを指定するか、画面の高さに合わせる単位で親を広げてから中央揃えを適用してください。
横は中央になるのに縦だけ揃いません。
横はtext-alignやmarginで簡単に揃いますが、縦は基準となる高さが必要です。flexやgridを使い、親に十分な高さを与えると縦も中央に揃います。
flexとgridのどちらで中央揃えすべきですか。
単一要素を中央に置くだけならどちらでも構いません。複数要素を格子状に並べつつ中央化したいときはgridが扱いやすいです。
高さが可変の要素を中央に置きたいです。
flexやgridなら高さが変わっても自動で中央を保ちます。これらが使えない環境では、絶対配置とtransformで自身のサイズの半分戻す方法が可変高さに対応できます。
原因が分からないときはどこから確認すべきですか？
まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。