CSS でのセンタリングの実践ガイド

CSS 数学関数の紹介で簡単に述べたように (便利な CSS トリックの記事を公開した後)、「CSS を中央に配置する方法」などのキーワードでこのサイトにトラフィックが来るのを見ました。 ですから、私が最終的にそのような記事を自分でまとめたのは理にかなっています。

CSS を使用してセンタリングする際の問題は、 justify-content: center;覚えておくことではないと確信しています。 財産。 異なるレイアウト構造には独自のルールがあり、特定のアプローチを尊重しない可能性があるという事実に関係しています。

しかし、まず最初に、このガイドは誰のために作成されましたか?

• CSSの「ルールと規制」に圧倒されるフロントエンド開発者。
• その div を一度だけ中央に配置するのが難しいと感じている人。 ああああ!!
• 不十分な構造のテンプレート/テーマで立ち往生している Web サイト所有者。

CSS では、センタリングは、垂直、水平、または垂直 & 水平と呼ばれることがよくあります。

Left、Right、Left & Right と解釈することもできます。 場合によっては、トップ & ボトムと呼ばれることもあります。 これらは、このガイド全体で使用する用語でもあります。 そうは言っても、それらすべての中で最も人気のあるアプローチから始めましょう.

インライン要素とブロック要素: text-align

最初は明白に思えないことの 1 つは、 text-align: center; 単なる段落以上のもので機能します。 プロパティとして、ブロックと見なされる任意の要素に適用できます。 これは、コンテンツが<div>または同様の要素で囲まれている限り、 text-alignを使用して中央に配置できることを意味します。

CSS & HTML

 <style> .text-align-container { display: flex; } .text-align-container-style .item { background: #fff2ea; padding: 20px 0; text-align: center; width: 100%; } </style> <div class="text-align-container text-align-container-style"> <div class="item">Hi, I am centered.</div> </div>

このアプローチの良いところは、Grid と Flexbox の両方で機能することです。 コンテンツを div 内にラップする限り、画像などのコンテンツでも問題なく機能します。

また、リストでもうまく機能します。

<span>要素を最初にブロック コンテナーにラップせずに中央に配置しようとするとどうなるか見てみましょう。

CSS & HTML

 .span-demo-container { background: #fff2ea; padding: 20px 0; width: 100%; } .span-demo-center { text-align: center; } <div class="span-demo-container"> <span class="span-demo-center">Am I in the center?</span> </div>

結果は次のとおりです。

この<span>要素が中央に配置されていないのは、インライン要素であるためです。 インライン要素の場合、常に親を設定する必要があります。

したがって、戻ってspan-demo-centerクラスを取得し、それを<div>に適用すると、結果は次のようになります。

大規模なコードベースで作業している場合、または構造が不十分なテンプレートを使用している場合、これが通常、センタリングが機能しない最大の理由です。 そのため、常にブロック要素とインライン要素をチェックし、それらが適切にネストされているかどうかを確認してください。

固定幅のブロック要素のセンタリング

要素をセンタリングするもう 1 つの一般的な方法は、 margin: auto;を使用することです。 固定幅のブロック要素に最も一般的に使用されます。

したがって、より大きなコンテナ内のカスタム div を考えてみてください。 そして、そのカスタム div 要素内にコンテンツを配置して、中央に配置しようとしています。

実際の例を見てみましょう。

CSS & HTML

 .margin-auto-container { background: #fff2ea; padding:1rem; } .margin-auto-inner { width: 200px; padding: 1rem; background: #efba93; color: #fff; margin: 0 auto; text-align: center; } <div class="margin-auto-container"> <div class="margin-auto-inner">Div & Text centered.</div> </div>

この例では、 margin-auto-containerクラスがこのブログ投稿からコンテナーを取得します。次に、 margin-auto-innerという新しいクラスを作成し、カスタム スタイルで固定幅を適用します。 最後に、 margin: 0 auto;を適用します。 内側のコンテナがメインのコンテナに対して中央に配置されるようにします。

 なぜ0？ 垂直 (上下) のマージンをそのまま残したいので 0 を追加し、水平 (左右) ビューに自動マージンを適用します。 これを変更して、「margin: 25px auto 50px;」などの個々の余白を指定できます。 これにより、上部に 25 ピクセルの余白が残り、下部に 50 ピクセルの余白が残ります。

重要:マージンの理由: auto; 中央に配置されていないのは、中央に配置しようとしている要素に固定幅を設定していないためです。

text-align: center;も指定します。 これにより、テキストが内側のコンテナー内の中央に配置されるためです。

固定幅のインライン要素の中央揃え

インライン要素の場合、カスタム設定幅は無視されます。

デモを見てみましょう:

CSS & HTML

 .margin-auto-container { background: #fff2ea; padding:1rem; } .margin-auto-inner-span { width: 150px; padding: 5px; background: #efba93; color: #fff; margin: 0 auto; text-align: center; } <div class="margin-auto-container"> <span class="margin-auto-inner-span">Inline <span> element with custom width. (Not centered).</span> </div>

結果は次のとおりです。

ご覧のとおり、 margin: auto;を設定しているにもかかわらず、 span インライン要素が中央に配置されていません。

幸いなことに、これには簡単な修正方法があります。 display: block;を追加することによって。 プロパティをmargin-auto-inner-spanクラスに追加します。特定の要素をblockとして扱いたいことをブラウザーに伝えることができます。 そして今、それは中央にあるはずです:

この時点で、どの HTML 要素がBlockと見なされ、どれがInlineと見なされるのか疑問に思われるかもしれません。 理解できる。 MDN リファレンスを参照することをお勧めします。

• ブロックレベルの要素
• インライン要素

インラインとブロックの違いを知っていれば、問題に適したセンタリング ソリューションを簡単に見つけることができます。

グリッドとフレックスボックス: 最新の方法

Grid と Flexbox は、最新の Web デザインで使用される 2 つのレイアウト モジュールです。 Flexbox は 1 次元のレイアウト システムですが、Grid は 2 次元のアプローチに基づいています。

また、両方のレイアウトの div を中央に配置することは、わずか 2 行のコードで実行できます。

垂直および水平: 普遍的なソリューション

グリッド レイアウトとフレックスボックス レイアウトの両方で、 place-content: center;を使用できます。 財産。

CSS & HTML

 .center-div-grid-layout { display: grid; /* display: flex; */ place-content: center; } <div class="center-div-grid-layout">It's that easy.</div>

place-contentプロパティは、 align-content & justify-contentの省略形です。

place-contentを使用すると、作業しているレイアウトのスタイルに応じて、さまざまな配置バリエーションを実行できます。

完全なリファレンスについては、この MDN ページを参照してください。

全体として、概説したセンタリング手法では不十分なエッジ ケースは非常に少数です。 古いレイアウトを使用している場合、最善の策は、スタイルシート自体の内部でクラス名の不一致を見つけることです。 次に、指定されたセンタリング ロジックが適切に実行されるように、要素を適切にネストする方法を見つけます。

絶対センタリング: 変換

transformプロパティは、水平方向と垂直方向 (左、右、上、下) のように、何かを中央に配置したい場合に使用します。

CSS & HTML

 .transform-example-container { height: 150px; position: relative; background: #fff2ea; } .transform-example-container .transform-absolute { width: 300px; text-align: center; background: #efba93; color: #fff; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); margin: 0; padding: 10px 0; position: absolute; } <div class="transform-example-container"> <p class="transform-absolute">Example: CSS transform</p> </div>

これは、中央に配置する子要素の位置を絶対に設定することで機能します。

親要素に相対位置があることが重要です。そうでない場合、変換プロパティはメイン レイアウトを親として使用します。

topとleftを使用して、左上隅に対する位置を設定します。 その後、 translate()を使用して要素を中央に引き込むことができます。

マージンとパディングは0 に設定する必要があります。そうしないと、位置がずれます。

これで、チュートリアル/リファレンスは終了です。 CSS によるセンタリングをマスターしたい場合は、お気に入りのコード エディターを起動して、これらの例を試してみてください。