CSSでdivを中央揃えする方法

 (joshwcomeau.com)
5 ポイント 投稿者 GN⁺ 2024-02-14 | 3件のコメント | WhatsAppで共有

要素を中央揃えする方法

  • 要素を親要素の中で中央に配置することは、長いあいだ扱いの難しい問題だった。
  • CSSの進化によりさまざまな解決策が提供され、現在では選択肢が広がっている。
  • このチュートリアルは、さまざまなアプローチ間のトレードオフを理解し、あらゆるシナリオで中央揃えに対応できる戦略を提供する。

自動マージンを使った中央揃え

  • 要素を水平方向に中央配置したいときは、auto 値のマージンを使うことができる。
  • 要素の幅を制限する必要があり、fit-content は要素のサイズを内容に合わせて調整する。
  • margin-inline プロパティを使うと、margin-left と margin-right を同時に auto に設定できる。

Flexboxを使った中央揃え

  • Flexboxは、主軸に沿ってアイテム群を配分する際に多くの制御を提供する。
  • 単一の要素を水平・垂直の両方で中央に配置でき、子要素がコンテナに収まらない場合でも中央揃えが維持される。
  • flex-direction プロパティを使って、複数の子要素の積み重ね方向を制御できる。

ビューポート内での中央揃え

  • 要素を親コンテナではなくビューポート内で中央に配置しなければならない場合がある。
  • position: fixed と inset: 0px を使って要素をビューポートに固定し、margin: auto を使って水平・垂直の両方で中央に配置できる。

サイズが不明な要素の中央揃え

  • 要素のサイズを明示的に把握できない場合は、fit-content を使って内容に合わせて要素を縮小できる。

CSS Gridを使った中央揃え

  • CSS Gridを使って水平・垂直の両方で要素を中央に配置する最も簡潔な方法は、place-content: center プロパティを使うことだ。

Flexboxとの違い

  • CSS Gridは別のレイアウトアルゴリズムを使用しており、場合によってはその追加の複雑さが問題になることがある。
  • Flexboxが親要素を基準にパーセンテージを計算するのに対し、CSS Gridはグリッドセルを基準に計算する。

要素スタックの中央揃え

  • CSS Gridを使えば、複数の要素を同じセルに割り当てることができ、要素は後ろから前へと積み重なる。

テキストの中央揃え

  • テキストはCSSで特別な扱いを受け、text-align プロパティを使って中央に配置できる。

これからの中央揃え

  • align-content プロパティはFlowレイアウトでも実装が進められており、ブロック方向のコンテンツ配置を制御する。

パターンを超えて

  • CSSを深く理解すれば、暗記に頼るのではなく直感を使って問題を解決できる。

どの方法を使うかを決める

  • 単一の要素を水平方向に中央配置したいときは、Flowレイアウトの自動マージン戦略を使える。
  • モーダルやバナーのような浮遊するUIを中央に配置したいなら、Positionedレイアウトと自動マージンを使える。
  • 要素スタックを中央に配置したいなら、CSS Gridを使える。
  • テキストを中央に配置したいなら text-align を使え、これは他の方法と組み合わせて使うこともできる。
  • それ以外のほとんどの状況ではFlexboxを使える。これは最も汎用性の高い方法で、1つまたは複数の子要素を水平・垂直に中央配置できる。

GN⁺の意見

  • この記事で最も重要なのは、さまざまなCSS中央揃えの方法への理解を助けることだ。
  • CSSの進化により、以前は複雑だった中央揃えの作業がはるかに簡単になり、これはWeb開発者にとって大きな助けになる。
  • FlexboxやCSS GridのようなモダンなCSS技術を理解して活用することは、Webデザインとレイアウトにおいて必須のスキルになっている。

関連記事

3件のコメント

 
v08zbv8fvlkjasdflkj 2024-02-15

そういえば、GeekNewsも記事が中央揃えになっていないのが急に気になりますね（泣）笑
 
joyfui 2024-02-14

place-items: center; を愛用していますが、方法はほかにもいろいろあるんですね。
 
GN⁺ 2024-02-14
Hacker Newsのコメント

  • 1つ目のコメント要約:

    • CSSで要素を中央配置するのが難しい理由について、さまざまな意見がある。
    • 多くの人が中央配置の難しさを問うとき、単にある要素を別の要素のど真ん中に置く方法を聞いているだけである。
    • 以前のHTMLでは<table>タグを使って簡単に中央配置できたが、CSSではそれが難しく感じられる。
    • CSSのほうが優れた道具だと言われながら、基本的な中央配置すら簡単にできなかった点は残念である。
    • そのため長い間テーブルレイアウトを使っていた。
    • それでもCSSは好きである。

  • 2つ目のコメント要約:

    • 自動ページレイアウトや整形の複雑さを理解していない人は多い。
    • この複雑さを単純な「思いどおりにしてくれ」という形に抽象化することはできない。
    • ウェブサイトの例としてGwern Branwenのサイトを挙げ、望むスタイルに合わせてコンテンツを制約することが重要だとしている。
    • Webページのレイアウトは、さまざまなディスプレイに合わせてコンテンツを表現する複雑な過程である。
    • CSSは、最初からWebページを作ろうと決めた人には複雑に見えるかもしれないが、実際には選択肢の幅が広い。
    • 望む結果を得るには、適切な道具を見つけ、コンテンツを適切な形に包む過程が必要である。

  • 3つ目のコメント要約:

    • CSSのポジショニングと中央配置を理解するには、ボックスモデルの理解が役に立つ。
    • displayとpositionプロパティは、ポジショニングを学ぶうえで基礎となる。
    • MDNにはこれに関する有用な記事がある。

  • 4つ目のコメント要約:

    • 記事は非常によく、特にインタラクティブな部分が印象的である。
    • CSSで中央配置を簡単に行う方法を提供するWebサイトを長年使ってきた。

  • 5つ目のコメント要約:

    • CSSにおける「中央配置」は古典的な問題である。
    • CSSが明快でないのは、複数の委員会が同時並行で設計した複雑な寄せ集めだからである。
    • CSSは継続的な変化の中で、個別モジュールの状態として存在している。
    • これはソフトウェア開発の望ましいやり方ではない。

  • 6つ目のコメント要約:

    • CSSは何十年経っても、テーブルを中央配置するのと同じくらい効果的な方法を示せていない。
    • その間、レイアウト目的でテーブルを使うことは恥ずかしいことのように見なされてきた。

  • 7つ目のコメント要約:

    • 多くの人がCSSに不満を持っている。
    • スタイル指定が互いに衝突したり、何の効果もなく失敗したりすることが主な問題である。

  • 8つ目のコメント要約:

    • 記事で述べられているとおり、Flexboxは単純なケースでは中央配置の問題を解決する。
    • Flexboxで解決できない場合は、単なる中央配置以上の複雑なことをしているからである。

  • 9つ目のコメント要約:

    • position: absolute, left: 50%, transform: translateX(-50%)を使うのが、自分の中央配置の主な手法である。

  • 10つ目のコメント要約:

    • CSSでdivを中央配置するのがあまりにも難しいため、Web開発を諦めた理由になった。