CSS の中央揃え

5 つの中心化手法がどのようなテストを経て、変化に対して最も耐性があるかを確認します。

Adam Argyle

CSS での中央揃えは、ジョークや嘲笑の対象となる、悪名高い課題です。2020 年 CSS は成熟してきています。歯をくいしばる心配ではなく、正直にこうしたジョークを笑えるようになりました。

動画で視聴したい場合は、この投稿の YouTube バージョンをご利用ください。

課題

中央揃えにはさまざまな種類があります。さまざまなユースケースや中心とする対象の数など。「成功する」センタリング テクニックの根拠を示すために、レジリエンス リンガーを作成しました。各調整戦略のバランスを保ち、パフォーマンスを観察するための一連のストレス テストです。最後に、スコアが最も高い手法と「最も価値が高い」手法をお知らせします。新しい中心化手法とソリューションを学んでいただけると幸いです。

レジリエンス リンガー

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

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. フロー: 問題ありません。

Gentle Flex は真の中心的アプローチのみの戦略です。place-content: center とは異なり、中央揃え中に子のボックスサイズが変更されないため、ソフトで優しい配置です。すべてのアイテムが可能な限り慎重に積み重ねられ、中央に配置され、間隔が空けられます。

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

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

3. Autobot

1. Squish: 優良
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. Squish: OK
2. スカッシュ: OK
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 のヒント