5 つのセンタリング手法を、一連のテストを通じて確認し、変化に最も強い手法を見つけます。
CSS でのセンタリングは、ジョークや嘲笑に満ちた、悪名高い課題です。2020 年 CSS は完全に成長し、今では歯を食いしばることなく、それらのジョークを素直に笑うことができます。
動画をご希望の場合は、この投稿の YouTube 版をご覧ください。
課題
センタリングにはさまざまな種類があります。ユースケース、中央に配置する要素の数など、さまざまな要素が関係します。「最適な」中央揃え手法の根拠を示すために、Resilience Ringer を作成しました。これは、各センタリング戦略をバランスよく実行し、そのパフォーマンスを観察するための一連のストレステストです。最後に、最もスコアの高い手法と「最も価値のある」手法を紹介します。新しいセンタリング手法とソリューションを習得していただければ幸いです。
レジリエンス リンガー
Resilience Ringer は、中央揃え戦略は国際的なレイアウト、さまざまなサイズのビューポート、テキスト編集、動的コンテンツに対して復元力があるべきだという私の信念を表しています。これらの原則は、センタリング手法が耐えるための次のレジリエンス テストを形成するのに役立ちました。
- 押しつぶされた状態: 中央揃えは幅の変更に対応できる必要があります。
- Squashed: centering should be able to handle changes to height
- 重複: 中央揃えはアイテム数に応じて動的に行う必要があります
- 編集: 中央揃えは、コンテンツの長さと言語に合わせて動的に行う必要があります。
- フロー: 中央揃えは、ドキュメントの方向と書き込みモードに依存しないようにする必要があります。
優れたソリューションは、コンテンツを中央に配置したまま、さまざまな言語モードや方向に圧縮、縮小、複製、編集、入れ替えを行うことで、その復元力を実証する必要があります。信頼性と復元力のあるセンター、安全なセンター。
凡例
メタ情報をコンテキストに保持できるように、視覚的な色のヒントをいくつか用意しました。
- ピンク色の枠線は、中央揃えスタイルの所有権を示します。
- グレーのボックスは、アイテムを中央に配置しようとするコンテナの背景です。
- 各子要素の背景色は白です。これにより、中央揃えの手法が子ボックスのサイズに与える影響（ある場合）を確認できます。
5 人の出場者
5 つのセンタリング テクニックがレジリエンス リングに入り、1 つだけがレジリエンス クラウン 👸 を受け取ります。
1. コンテンツ センター
- Squish: 素晴らしい！
- Squash: 素晴らしい！
- 重複: 素晴らしい！
- 編集: 素晴らしい！
- フロー: 素晴らしい！
display: grid と place-content の短縮形は簡潔で、これに勝るものはありません。子要素をまとめて中央揃えにして両端揃えにするため、読み取り対象の要素のグループを中央揃えにする手法として適しています。
.content-center {
display: grid;
place-content: center;
gap: 1ch;
}
- スペースが限られていてオーバーフローが発生する場合でも、コンテンツは中央に配置されます。
- 編集とメンテナンスを 1 か所に集約
- Gap は、n 個の子要素の間隔が等しくなるようにします。
- Grid はデフォルトで行を作成する
- 最も幅の広い子（
max-content）が、他のすべての子の幅を設定します。これについては、Gentle Flex で詳しく説明します。
段落や見出し、プロトタイプ、または一般的に読みやすい中央揃えが必要なものを含むマクロ レイアウトに最適です。
2. Gentle Flex
- Squish: 素晴らしい！
- Squash: 素晴らしい！
- 重複: 素晴らしい！
- 編集: 素晴らしい！
- Flow: ありがとうございます。
Gentle Flex は、より真のセンタリングのみの戦略です。place-content: center とは異なり、中央揃えの際に子のボックスサイズが変更されないため、ソフトで穏やかな動きになります。すべてのアイテムが、できるだけ緩やかに積み重ねられ、中央に配置され、間隔が空けられています。
.gentle-flex {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1ch;
}
- 配置、方向、配分のみを処理する
- 編集とメンテナンスを 1 か所で行える
- Gap は、n 個の子要素の間隔が等しくなるようにします。
- ほとんどのコード行
マクロ レイアウトとミクロ レイアウトの両方に最適。
3. Autobot
- 押しつぶす: 良好
- スカッシュ: 良好
- 重複: 問題なし
- 編集: 素晴らしい
- フロー: 良好
コンテナは、配置スタイルなしで flex に設定され、直接の子は自動マージンでスタイル設定されます。margin: auto のすべての要素を扱うことには、どこか懐かしく、素晴らしいものがあります。
.autobot {
display: flex;
}
.autobot > * {
margin: auto;
}
- 楽しいトリック
- 手っ取り早く
- オーバーフロー時の不自然な結果
- ギャップではなく配分に依存するということは、子が側面に接した状態でレイアウトが発生する可能性があることを意味します。
- 位置に「プッシュ」されるのは最適ではないようで、子のボックスサイズが変更される可能性があります。
アイコンや疑似要素を中央に配置するのに最適です。
4. Fluffy Center
- スキッシュ: 悪い
- スカッシュ: 悪い
- 重複: 悪い
- 編集: 素晴らしい！
- Flow: ありがとうございます。（論理プロパティを使用している場合）
「ふわふわ中央」は、最も美味しそうな名前の候補であり、完全に要素 / 子が所有する唯一の中央揃え手法です。ソロのピンクのインナーボーダーが見える！？
.fluffy-center {
padding: 10ch;
}
- コンテンツを保護する
- 原子力
- すべてのテストに、このセンタリング戦略が密かに含まれています。
- 単語間のスペースはギャップ
- 役に立たないという錯覚
- コンテナとアイテムの間で競合が発生しています。これは、それぞれがサイズ設定を厳密に指定しているためです。
用途: 単語やフレーズを中心としたセンタリング、タグ、ピル、ボタン、チップなど。
5. ポップ＆プラップ
- スクイッシュ: よし
- Squash: わかりました。
- 重複: 悪い
- 編集: 罰金
- フロー: 良好
これは、絶対位置によって要素が通常のフローから飛び出すためです。名前の「plop」の部分は、他の要素の上に配置する（plop）ときに最も便利であることに由来しています。これは、コンテンツ サイズに対して柔軟かつ動的な、従来型の便利なオーバーレイ センタリング手法です。UI を別の UI の上に重ねて配置したい場合があります。
- 役に立った
- 信頼性
- 必要なときに、非常に役立つ
- 負のパーセンテージ値を持つコード
- コンテナ ブロックを強制するには
position: relativeが必要 - 不自然な改行
- 追加の作業なしで、コンテナ ブロックごとに 1 つのみ
最適な用途: モーダル、トースト、メッセージ、スタック、奥行き効果、ポップオーバー。
最優秀賞
もし私が島にいて、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;
}
Fluffy Center は非常に小さいため、センタリング手法として見落とされがちですが、私のセンタリング戦略の定番です。非常にアトミックなため、使用していることを忘れることもあります。
まとめ
どのようなことが、センタリング戦略を妨げる要因になりますか？レジリエンス リンガーに追加できる課題は他に何がありますか？コンテナの変換と自動高さ切り替えを検討しましたが、他には何があるでしょうか。
私のやり方がわかったところで、あなたならどうしますか？アプローチを多様化し、ウェブで構築するすべての方法を学びましょう。この投稿の Codelab に沿って、この投稿の例のような独自の中央揃えの例を作成してください。ツイートしていただければ、以下のコミュニティ リミックス セクションに追加します。