CSSの中央揃えで、最も万能で信頼できる実装テクニック

CSSは進化が早く、中央揃えのテクニックも一昔前のものよりも確実に使いやすくなっています。天地左右の中央に要素を配置する際に、要素の幅や高さが可変だったり、要素の数が増えても対応する最新の実装テクニックを紹介します。

現在主流の5つのテクニックからそれぞれの特徴と最も万能で信頼できるテクニックを評価します。

Centering in CSS
by Adam Argyle

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

• はじめに
• 1. Content Center
• 2. Gentle Flex
• 3. Autobot
• 4. Fluffy Center
• 5. Pop & Plop
• 中央揃えに最適なテクニック

はじめに

CSSの中央揃えは、ジョークの対象にもなる悪名高い課題でした。しかし今日ではCSSはすべて進化し、素直にこれらのジョークを笑えるようになりました。

動画がお好みの場合は、この記事のYouTubeバージョンをご覧ください。

中央揃えにはさまざまなタイプがあります。使用方法の違い、中央揃えにするアイテムの数の違いなどから、私は中央揃えの各テクニックを比較しました。あなたはそれぞれの性能を簡単に比較できます。また、最後に最高得点のテクニックと最も価値のあるテクニックを明らかにします。
2021年、あなたは中央揃えの新しいテクニックと解決策を手に入れることができるでしょう。

中央揃えのテクニックの比較項目

比較項目は、中央揃えはインターナショナルなレイアウト、可変サイズのビューポート、テキスト編集、動的コンテンツに対して耐性を持つべきであるという私の信念を表現したものです。下記の項目は、中央揃えのテクニックをテストするのに役立ちました。

1. Squished:

   中央揃えは、アイテムの幅が変更しても対応。

2. Squashed:

   中央揃えは、アイテムの高さが変更しても対応。

3. Duplicate:

   中央揃えは、アイテムの数が変更しても対応。

4. Edit:

   中央揃えは、コンテンツの長さを編集しても対応。

5. Flow:

   中央揃えは、writing mode（フロー）に依存しない。

最高得点のテクニックは、コンテンツを中央に保ちながら、横に押しつぶされても、縦に押しつぶされても、アイテムが増えても、長さが編集されても、さまざまな言語モードでも、レイアウトを維持する必要があります。それが信頼できる中央揃え、安全な中央揃えです。

モックアップの解説

メタ情報をコンテキストに沿って表示するために、視覚的なヒントをカラーで明確にしました。

背景色ホワイトの子アイテムを中央揃えにします

• ピンクのボーダーは、中央揃えのスタイルの所有権を示します。
  上記はグレーのボックスがピンクのため、親要素にスタイルを適用します。
• グレーのボックスは、子アイテムを中央配置にするコンテナの背景です。
• 子アイテムの背景色はホワイトで、中央揃えのテクニックが子のボックスサイズに与える影響を確認できます（影響がある場合）。

1. Content Center

1. Squished（幅）: great!
2. Squashed（高さ）: great!
3. Duplicate（数）: great!
4. Edit（長さ）: great!
5. Flow（フロー）: great!

display: grid;とplace-contentショートハンドの簡潔さに勝るものはないでしょう。このCSSは、子要素すべてをまとめて中央揃えにするため、グループ化して配置したい複数の要素に最適な中央揃えのテクニックです。

長所:

• 限られたスペースやオーバーフローでもコンテンツは中央に配置されます。
• 中央揃えを修正する場合は、1ヵ所に集約されています。
• ギャップは、n個の子要素間の等しいスペースを保証します。
• グリッドはデフォルトで行を作成します。

短所:

• 最も幅が広い子要素（max-content）は、それ以外のすべての幅を設定します。詳しくは次の2. Gentle Flexで説明します。

このテクニックは、段落や見出しを含むマイクロレイアウト、プロトタイプ、または可読性が求められる中央揃えに適しています。

2. Gentle Flex

1. Squished（幅）: great!
2. Squashed（高さ）: great!
3. Duplicate（数）: great!
4. Edit（長さ）: great!
5. Flow（フロー）: great!

Gentle Flexは、より真の中央揃えのテクニックです。place-content: center;とは異なり、中央揃えをしている間に子要素のボックスサイズは変更されないため、柔らかくて優しい（Gentle）です。可能な限り穏やかに、すべてのアイテムは積み重ねられて中央に配置され、スペースをあけて配置されます。

長所:

• 配置、方向、分散のみを扱えます。
• 中央揃えを修正する場合は、1ヵ所に集約されています。
• ギャップは、n個の子要素間の等しいスペースを保証します。

短所:

• コードが長い。

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

3. Autobot

1. Squished（幅）: great
2. Squashed（高さ）: great
3. Duplicate（数）: fine
4. Edit（長さ）: great
5. Flow（フロー）: great

コンテナdisplay: flex;を定義し、整列のスタイルはありませんが、直接の子要素は自動マージンで中央に配置されます。margin: auto;が要素の四方に機能するこのテクニックは昔からありますが、素晴らしいですね。

長所:

• 昔からある素晴らしいテクニック。
• 簡単だけど、美しくはない。

短所:

• オーバーフローすると厄介な結果になる。
• ギャップではなく、ディストリビューション（分配）に頼るので、子要素が側面に触れた状態でレイアウトが可能になる。
• 自動マージンによりプッシュされることは最適とは思えず、子要素のボックスサイズに影響をもたらす可能性があります。

アイコンや疑似要素を中央に配置するのに適しています。

4. Fluffy Center

1. Squished（幅）: bad
2. Squashed（高さ）: bad
3. Duplicate（数）: bad
4. Edit（長さ）: great!
5. Flow（フロー）: great!（論理プロパティを使用する場合）

Fluffy Centerはおいしそうな響きですが、この中で唯一の子要素で完結する中央揃えのテクニックです。ピンクのボーダーの挙動をご覧ください！

長所:

• コンテンツを保護します。
• コードがアトミックです。
• すべてのテストには、このセンタリング戦略が密かに含まれています。
• ワードスペースはギャップです。

短所:

• 役に立たなそうに見える。
• それぞれのサイズは非常にしっかりしているため、コンテナとアイテムが衝突します。

タグやボタンなど、単語やフレーズ中心の中央揃えに適しています。

5. Pop & Plop

1. Squished（幅）: ok
2. Squashed（高さ）: ok
3. Duplicate（数）: bad
4. Edit（長さ）: fine
5. Flow（フロー）: fine

このテクニックは絶対配置によって要素を通常のフローから外して中央揃えにするので、「pop」と名付けました。「plop」は他のものの上に配置するという意味です。昔からある古典的なテクニックで、コンテンツのサイズに合わせて柔軟かつダイナミックに設定できます。UIを他のUIの上に重ねて配置する必要がある時に使えます。

長所:

• 便利。
• 信頼性が高い。
• 必要とする時には、非常にかけがえのないもの。

短所:

• 負のパーセンテージ。
• ブロックを強制的に含むようにするにはposition: relative;が必要。
• 早くて、気まずい改行。
• 含まれているブロックごとに1つしか存在できない。

モーダル、メッセージ、スタック、奥行き効果、ポップオーバーに適しています。

中央揃えに最適なテクニック

もし一つしか中央揃えのテクニックを使用できないとしたら、これを選びます。

Gentle Flex 🎉

マクロとミクロの両方のレイアウトに役立ち、私のスタイルシートでいつでも見つけることができます。期待通りの結果が得られ、万能で信頼できるテクニックです。

確かに、CSSの量は少し多いかもしれませんが、このテクニックが提供するメリットはコードの量を上回るものです！

そして、MVPは！

Fluffy Center

Fluffy Centerはミクロなので、中央揃えのテクニックとして見落としがちですが、私の中央揃え戦略の定番です。あまりにもコードがアトミックなので、使用しているのを忘れてしまうくらいです！

ここで紹介した中で唯一の子要素で完結する中央揃えのテクニックです。

終わりに

あなたの中央揃え戦略を変えるものがありましたか？
コンテナのauto-heightスイッチやtranslationも考えてみましたが、他にも何かよいものがありますか？ よいテクニックがあれば、私にツイートで教えてください。

アプローチを多様化して、Web上での構築方法を学んでいきましょう。