5 つのセンタリング手法に沿って一連のテストを行い、変更に対して最も耐性が高い手法を確認します。
CSS の中心に据えることは、ジョークや嘲笑に満ちた悪名高い課題です。2020 年 CSS は成熟してきていますが 今ではこうしたジョークを 歯を食いしばった。
動画で視聴したい場合は、この投稿の YouTube バージョンをご利用ください。
課題
センタリングにはさまざまな種類があります。さまざまなユースケースから 「勝利」の根拠を示すために、センタリング テクニック、I Resilience Ringer を開発しました。それぞれのセンタリングに対する一連のストレステストで、 バランスを取るための戦略を策定し、パフォーマンスを観察します。 最後に、最高スコアのテクニックと「最も価値がある」テクニックを明らかにします。 新しいセンタリングのテクニックやソリューションがお役に立てば幸いです。
レジリエンスの着信音
Resilience Ringer は 国際的なレイアウト、可変サイズのビューポート、テキスト編集、動的な 説明します。これらの基本理念は、 レジリエンス：
- Squished: 中央に配置すると、幅の変更を処理でき、
- Squashed: センタリングは高さの変更を処理できなければなりません。
- 重複: 中心はアイテム数に対して動的であること
- 編集: センタリングはコンテンツの長さや言語に応じて動的にする必要がある
- フロー: 中央揃えはドキュメントの方向と書き込みモードに依存しない必要がある
優れたソリューションは、コンテンツを 圧縮、押しつぶされ、複製、編集、入れ替えなどの操作を さまざまな言語モードやルート案内を利用できます。信頼性と復元性に優れたセンター、安全なセンター。
Legend
メタ情報を保持できるように、視覚的なカラーヒントを提供しています。 コンテキスト内:
- ピンクの枠線は、中央配置のスタイルの所有権を示します。
- グレーのボックスは、中央に配置しようとしているコンテナの背景です。 アイテム
- それぞれの子の背景色は白なので、 センタリング手法の子ボックスのサイズ（存在する場合）
5 人の参加者
レジリエンス リンガーには、5 つのセンタリング手法が入力され、 レジリエンス クラウン 👸?。
1. コンテンツ センター
<ph type="x-smartling-placeholder">- Squish: ありがとうございます。
- スカッシュ: すばらしいですね！
- 重複: 問題ありません。
- 編集: ありがとうございます。
- フロー: ありがとうございます。
display: grid や
place-content の省略形。子どもを中心に据えて正当化するので、
読み取る対象となる要素のグループを、しっかりと中央に配置する手法です。
.content-center {
display: grid;
place-content: center;
gap: 1ch;
}
- 限られたスペースやはみ出しでもコンテンツは中央に配置される
- 中心的な編集とメンテナンスをすべて 1 か所で行える
- ギャップにより、n 個の子の間で均等なスペースが保証されます。
- グリッドがデフォルトで行を作成する
- 最も幅の広い子（
max-content）が、それ以外のすべての要素の幅を設定します。これは 詳しくは、Gentle Flex をご覧ください。
最適: 段落や見出し、プロトタイプ、 見やすい中央に配置する必要があるものが一般的です。
2. ジェントルフレックス
- Squish: これで完了です。
- スカッシュ: よかったです。
- 重複: 問題ありません。
- 編集: ありがとうございます。
- フロー: ありがとうございます。
Gentle Flex は、真の中心的アプローチのみの戦略です。柔らかく優しく
place-content: center とは異なり、子供用ボックスのサイズは
集中化できます。できる限り優しく、すべてのアイテムが積み重ねられ、中央に配置され、一定の間隔で配置されます。
.gentle-flex {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1ch;
}
- 配置、方向、配分のみを処理
- 編集とメンテナンスがすべて 1 か所で行える
- ギャップにより、n 個の子の間で均等なスペースが保証されます。
- ほとんどのコード行
マクロとマイクロの両方のレイアウトに最適です。
3. オートボット
- Squish: 非常に良い
- スカッシュ: 最高
- Duplicate（重複）: 正常
- 編集: 良好
- フロー: 最適
コンテナは Flex に設定され、アライメント スタイルは設定されておらず、直接の子は
余白が自動的に設定されます。何か懐かしさと素晴らしさが
要素のすべての面で動作する margin: auto。
.autobot {
display: flex;
}
.autobot > * {
margin: auto;
}
- トリック
- すぐに汚れ
- オーバーフロー時の不自然な結果
- ギャップではなく分配に依存するため、レイアウトが子を持つ可能性がある 側面に触れる
- 「押し寄せる」最適とは思えず、結果的に お子様の箱のサイズに合わせてください。
アイコンや疑似要素を中央に配置する場合に最適です。
4. ふわふわセンター
- Squish: 悪い
- スカッシュ: 悪い
- 重複: 不正
- 編集: ありがとうございます。
- フロー: ありがとうございます。（論理プロパティを使用する場合）
コンテスト参加者「ふわふわ中央」間違いなくおいしいと言えるでしょう。 完全に要素/子が所有するセンタリング手法です。ソロのインナーピンクを見る 枠線！？
.fluffy-center {
padding: 10ch;
}
- コンテンツを保護する
- 原子力
- すべてのテストに密かにこの中心化戦略が含まれている
- 単語のスペースに抜けがある
- 役に立たないという錯覚
- 当然、コンテナとアイテムの間には衝突があります。これは、それぞれが サイズにこだわっていると
最適: 単語やフレーズを中心にしたセンタリング、タグ、丸薬、ボタン、チップ、 できます。
5. ポップ&プラップ
- Squish: OK
- スカッシュ: OK
- 重複: 不正
- 編集: ファイン
- Flow: ファイン
「ポップ」絶対位置指定では要素が通常から外れるため できます。「プロップ」いくつかの部分が、最も便利だと思ったときに由来しています。 他のものの上に重ねていますこれはクラシックで便利な オーバーレイのセンタリングです コンテンツのサイズに応じて柔軟で動的な技術を 開発できます場合によっては、 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 に沿って、 この投稿のように、独自のセンタリング サンプルを作成します。ツイート バージョンを作成して、それを 後述のコミュニティのリミックスに関するセクションをご覧ください。