5 つのセンタリング手法に沿って一連のテストを行い、どれが最も変更の影響を受けやすいかを確認します。
CSS の中央に配置することは、ジョークや嘲笑に満ちた、悪名高い課題です。2020 年 CSS は成熟し 歯を食いしばるのではなく ジョークを正直に笑えるようになりました
動画をご覧になる場合は、この投稿の YouTube バージョンをご覧ください。
課題
センタリングにはさまざまな種類があります。さまざまなユースケース、中心となるものの数などから、「成功する」センターリング手法の根拠を示すために、Resilience Ringer を作成しました。これは、各センターリング戦略のバランスを取り、パフォーマンスをモニタリングするための一連のストレステストです。最後に、最高スコアの手法と「最も価値のある手法」を紹介します。 新しいセンタリングの手法とソリューションがお役に立てば幸いです。
レジリエンスの着信音
Resilience Ringer は、センターリング戦略は国際的なレイアウト、可変サイズのビューポート、テキスト編集、動的コンテンツに対して耐障害性があるべきであるという私の信念を反映したものです。これらの原則は、センタリング手法に耐えるための次の復元力テストの作成に役立ちました。
- 押しつぶされている: 幅の変更を処理できるよう中央に配置する必要があります。
- 押しつぶされている: 中央に配置することで、高さの変更を処理できる必要があります。
- 重複: 中央揃えはアイテムの数に応じて動的にする必要があります
- 編集: 中央揃えは、コンテンツの長さと言語に応じて動的にする必要があります。
- フロー: センタリングはドキュメントの方向と書き込みモードに依存しない
成功するソリューションは、コンテンツを中央に保持したまま、さまざまな言語モードや言語方向へのスキッシュ、押しつぶし、複製、編集、置き換えを行い、その復元力を示す必要があります。安全でレジリエントなセンター。
凡例
コンテキストでメタ情報を把握できるように、視覚的な色のヒントを用意しました。
- ピンクの枠線はセンタリング スタイルの所有権を示しています
- グレーのボックスはコンテナの背景で、アイテムを中央に配置しようとしています。
- それぞれの子の背景色は白であるため、中央揃え手法が子ボックスのサイズ（ある場合）に与える影響を確認できます。
5 名の参加者
5 つのセンターリング手法がレジリエンスの着信音に入り、そのうちの 1 つだけがレジリエンスの王冠 👸? を獲得します。
1. コンテンツ センター
- Squish: すばらしい！
- スカッシュ: すばらしい。
- 重複: 問題ありません。
- 編集: それでは、
- フロー: ありがとうございます。
ただし、display: grid や place-content 短縮形に比べれば、なかなか簡潔です。子を中央に配置して両端揃えを行うため、読み取られる要素のグループを中心とした信頼できるセンタリング手法といえます。
.content-center {
display: grid;
place-content: center;
gap: 1ch;
}
- スペースが限られてもコンテンツがはみ出している場合でも、コンテンツが中央に配置される
- 中央の編集とメンテナンスを 1 か所に集約
- ギャップにより n 個の子間の均等な間隔が保証される
- グリッドはデフォルトで行を作成します
- 最も幅の広い子（
max-content）は、それ以外のすべての幅を設定します。これについては、Gentle Flex で詳しく説明します。
段落や見出し、プロトタイプなど、一般的に判読可能な中央処理が必要な要素を含むマクロ レイアウトに適しています。
2. ジェントルフレックス
- 押しつぶし: すばらしい。
- スカッシュ: すばらしい。
- 重複: ありがとうございます。
- 編集: ありがとうございます。
- フロー: ありがとうございます。
ジェントル フレックスは、よりセンタリングのみの戦略です。place-content: center とは異なり、中央揃えの際に子ボックスのサイズは変更されないため、柔らかく穏やかです。すべての項目をできるだけ静かに積み重ね、中央に揃え、間隔を空けます。
.gentle-flex {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1ch;
}
- アライメント、方向、分散のみを処理
- 編集とメンテナンスを 1 か所で
- ギャップにより n 個の子間の均等な間隔が保証される
- ほとんどのコード行
マクロ レイアウトとマイクロ レイアウトの両方に適しています。
3. 自動ボット
- Squish: すばらしい。
- スカッシュ: 素晴らしい
- 重複: 問題ありません
- 編集: すばらしい
- フロー: 素晴らしい
コンテナは位置揃えスタイルなしで flex に設定されていますが、直接の子は自動マージンでスタイル設定されます。要素のすべての側面で margin: auto が機能することには、ノスタルジックで素晴らしいものがあります。
.autobot {
display: flex;
}
.autobot > * {
margin: auto;
}
- 面白い裏技
- クイック アンド ダーティ
- オーバーフローした場合の結果が不適切
- ギャップではなくディストリビューションに依存すると、子が側面に接している状態でレイアウトが行われる可能性がある
- 所定の位置に「押し込まれる」ことは最適ではないと思われ、子のボックスサイズが変更される可能性がある
アイコンや疑似要素を中心に配置する場合におすすめします。
4. フラフィー センター
- 押しつぶす: 悪い
- スカッシュ: 悪い
- 重複: 不適切
- 編集: ありがとうございます。
- フロー: ありがとうございます。（論理プロパティを使用している場合に限ります）
コンテスト参加者の「ふわふわしたセンター」は、最もおいしいサウンド候補で、完全に要素/子供が所有する唯一のセンターリング テクニックです。単色のピンクの枠線が 見えますか？
.fluffy-center {
padding: 10ch;
}
- コンテンツを保護する
- 原子力
- すべてのテストに密かにこのセンターリング戦略が含まれています
- 空白がある
- 役に立たないと錯覚する
- コンテナとアイテムの間に 競合が発生します
単語またはフレーズ中心のセンタリング、タグ、丸薬、ボタン、チップなどに適しています。
5. ポップ &プロップ
- 押しつぶす: 普通
- スカッシュ: 普通
- 重複: 不適切
- 編集: 大丈夫
- フロー: 正常
絶対位置によって要素が通常のフローから外れるため、この状態は「ポップ」します。「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 {
padding: 2ch;
}
Fluffy Center は非常に小さいため、センタリング手法として見落としがちですが、これは私のセンターリング戦略の要です。非常にアトミックなので 忘れてしまいがちです
まとめ
センタリング戦略を損なうものは何ですか？レジリエンスの着信音には 他にどのような課題を追加できるでしょうかコンテナで平行移動と自動高さスイッチを検討したのですが、他には何でしょうか？
さて、やったらどうやってやったの？多様なアプローチとウェブでの構築方法を 学んでいきましょうこの投稿の Codelab に沿って、この投稿のような独自のセンタリング サンプルを作成します。あなたのバージョンをツイートしていただければ、下のコミュニティのリミックス セクションに追加します。