CSS の中央揃え

5 つの中心化手法が、一連のテストでどのように機能するかを追跡し、変化に対して最も耐性のある手法を確認します。

Adam Argyle

CSS での中央揃えは、ジョークや嘲笑の対象となる、悪名高い課題です。2020 年の CSS は成熟しており、歯を食いしばってではなく、心から笑ってジョークを楽しめるようになりました。

動画で確認したい場合は、YouTube 版の投稿をご覧ください。

課題

中央揃えにはさまざまな種類があります。さまざまなユースケース、中心に配置する要素の数などから、中心に配置する方法は異なります。中心に配置する方法の「勝ちパターン」の根拠を示すために、Resilience Ringer を作成しました。各調整戦略のストレステストを実施して、バランスを保ち、パフォーマンスを確認します。最後に、スコアが最も高い手法と「最も価値が高い」手法をお知らせします。新しい中心化手法とソリューションを学んでいただけると幸いです。

レジリエンス リンガー

レジリエンス リンガーは、国際的なレイアウト、可変サイズのビューポート、テキスト編集、動的コンテンツに対して、中央揃え戦略がレジリエントであるべきという私の信念を表しています。これらの原則に基づいて、以下のようなレジリエンス テストを実施し、自己調整手法の持続性を検証しました。

1. 圧縮: 中央揃えは幅の変更に対応できる必要があります
2. 圧縮: 中央揃えは高さの変更に対応できる必要があります
3. 重複: アイテムの数に応じて中央揃えが動的に行われるべき
4. 編集: 中央揃えは、コンテンツの長さと言語に合わせて動的にする必要があります
5. フロー: 中央揃えは、ドキュメントの向きと入力モードに依存しないものでなければなりません。

優勝したソリューションは、さまざまな言語モードや向きに圧縮、圧縮、複製、編集、入れ替えを加えながら、コンテンツを中央に保つことで、その復元力を証明する必要があります。信頼性が高く、復元力があり、安全なセンター。

Legend

メタ情報をコンテキスト内で維持できるように、視覚的な色のヒントを用意しました。

• ピンクの枠線は、中央揃えスタイルの所有権を示します
• グレーのボックスは、アイテムを中央に配置するコンテナの背景です。
• 各子要素の背景色は白色に設定されているため、中央揃え手法が子要素のボックスサイズに与える影響（ある場合）を確認できます。

5 人の出場者

5 つの自己調整方法が Resilience Ringer に登録され、1 つだけが Resilience Crown 👸? を獲得します。

1. コンテンツ センター

1. Squish: ありがとうございます。
2. Squash: 了解しました。
3. 重複: 問題ありません。
4. 編集: ありがとうございます。
5. フロー: ありがとうございます。

display: grid の簡潔さと place-content の省略形に勝るものはありません。子要素をまとめて中央揃えにするため、読み取りを目的とした要素のグループに適した確実な中央揃え手法です。

.content-center {
  display: grid;
  place-content: center;
  gap: 1ch;
}

適している: 段落や見出し、プロトタイプなど、読みやすく中央揃えが必要な要素を含むマクロ レイアウト。

2. 優しいフレックス

1. Squish: 問題ありません。
2. スカッシュ: 素晴らしいです。
3. 重複: 重複が見つかりました。
4. 編集: ありがとうございます。
5. フロー: 問題ありません。

ジェントル フレックスは、より正確な中央配置のみの戦略です。place-content: center とは異なり、中央揃え中に子のボックスサイズが変更されないため、ソフトで優しい配置です。すべてのアイテムが可能な限り慎重に積み重ねられ、中央に配置され、間隔が空けられます。

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}

マクロ レイアウトとマイクロ レイアウトの両方に適しています。

3. Autobot

1. 圧縮: 良好
2. スカッシュ: 優良
3. 重複: 問題なし
4. 編集: 素晴らしい
5. フロー: 優良

コンテナは、整列スタイルなしで Flex に設定されていますが、直接の子には自動マージンのスタイルが設定されています。要素のすべての側面で動作する margin: auto には、ノスタルジックで素晴らしいものがあります。

.autobot {
  display: flex;
}
.autobot > * {
  margin: auto;
}

アイコンや疑似要素を中央に配置する場合に最適です。

4. Fluffy Center

1. 圧縮: 悪い
2. スカッシュ: 不適格
3. 重複: 不適切
4. 編集: ありがとうございます。
5. フロー: （論理プロパティを使用する場合）

コンテスト参加者の「ふわふわの中央」は、はるかにおいしそうに聞こえる候補であり、要素/子要素が完全に所有する唯一の中央揃え手法です。ピンクの内側の枠線が単独で表示されています。

.fluffy-center {
  padding: 10ch;
}

単語やフレーズを中心とした配置、タグ、ピル、ボタン、チップなどに適しています。

5. ポップ＆プラップ

1. 圧縮: 問題なし
2. スカッシュ: 問題なし
3. 重複: 不適切
4. 編集: 問題なし
5. フロー: 問題なし

これは、絶対位置によって要素が通常のフローからポップするため「ポップ」します。名前の「plop」は、他のものの上に置くのが最も便利なときに由来しています。これは、コンテンツのサイズに合わせて柔軟かつ動的に調整できる、オーバーレイの中央揃えの古典的な手法です。場合によっては、UI を他の UI の上に配置するだけで済むこともあります。

適している: モーダル、トースト、メッセージ、グルーピング、奥行きエフェクト、ポップオーバー。

受賞者

島にいて、1 つの中心化手法しか使えないとしたら、それは

[ドラムロール]

Gentle Flex 🎉?

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}

マクロ レイアウトとマイクロ レイアウトの両方に役立つため、私のスタイルシートでは常に使用しています。期待どおりの結果が得られる、信頼できるソリューションです。また、私はサイズ設定にこだわりがあるため、このソリューションに移行する傾向があります。確かに、入力するコードは多くなりますが、そのメリットは追加コードのメリットを上回ります。

最小実装製品（MVP）

Fluffy Center

.fluffy-center {
  padding: 2ch;
}

ふわふわ センターは非常に微妙なため、中心合わせの手法として見落とされがちですが、私の中心合わせ戦略の定番です。アトミックなので、使用していることを忘れることもあります。

まとめ

どのようなことが原因で、中央揃え戦略が破綻するのでしょうか？レジリエンス リンガーに追加できるその他の課題は何ですか？コンテナの翻訳と自動高さ切り替えを検討しました。他に何がありますか？

私の方法をご覧になったところで、あなたならどうしますか？アプローチを多様化し、ウェブ上で構築するすべての方法を学びましょう。この投稿の Codelab に沿って、この投稿の例と同様に、独自の中央揃えの例を作成します。作成したバージョンをツイートしてください。下記のコミュニティのリミックス セクションに追加します。

コミュニティ リミックス

• ブログ投稿で CSS のヒント