を使用して項目を中央揃えにするのは、以前は非常に困難でした。まあ、もうそれはありません。今ではそれを行うためのさまざまな方法があります。シナリオごとに異なるオプションが必要になる可能性があるため、これは良いことです。このビデオでは、項目を中央に配置する私のお気に入りの 3 つの方法を説明します。位置決めを使用し、次にフレックスボックスを使用し、最後に頼りになる CSS グリッドを使用します。 HTML と CSS さて、それでは始めましょう。   https://youtu.be/XMH4c1xIZtE?embedable=true  Web 上のコンテナの中央に単純にアイテムを配置することがこれほど長い間困難だったというのは、本当に奇妙なことです。まあ、水平方向のセンタリングは簡単でしたが、垂直方向のセンタリングは近年までほぼ不可能でした。  CSS の配置を使用して項目を中央に配置する CSS の位置決めを使用するこの最初の方法は、おそらく最も古くから存在していますが、新しいプロパティが登場するにつれて少し進化しました。例を見てみましょう。 ここには、赤い枠線を持つ別のコンテナの中央に配置したいボックスがあります。これは強力な要素であり、ここで見ている赤いボックスである 要素内に直接配置されます。  div このメソッドでは絶対配置を使用するので、それを 要素に追加しましょう。 strong   strong { position: absolute; } これが正しく機能するには、  項目を配置するための配置コンテキストを作成する必要があります。これを行うにはさまざまな方法がありますが、この例の最良のオプションは相対位置を使用することです。 div   div { position: relative; } これで、要素を の高さの 50 パーセント、幅の 50 パーセント以上に配置できるようになりました。上から下に配置するには、新しい論理プロパティ  50 パーセントの値で使用できます。また、左から上に配置するには、同じ値 50% で を使用します。 div inset-block-start inset-inline-start     strong { ... inset-block-start: 50%; inset-inline-start: 50%; } そうですね、正確に中央に配置されていませんね? これは、項目を の中央に配置しましたが、その位置は左上隅に基づいているためです。ここで行う必要があるのは、アイテムを高さの 50 パーセント、幅の 50 パーセントを超えて戻すことです。こうすることで、正しく中央に配置されます。しかし、どうすればこれができるのでしょうか? div 実はとても簡単なのです。新しい CSS  プロパティを使用できます。最初の値は X 軸に沿って変換されます。 50% 戻る必要があるため、マイナスの 50% の値を追加します。そして、2 番目の値は Y 軸に沿って変換され、同じ値のマイナス 50 パーセントを与えます。 translate     strong { ... translate: -50% -50%; } そして、行きます。完璧に中央にあります。 これは、位置決めと変換を使用した最終的な実際の例です。   https://codepen.io/brianmtreese/pen/PoLYmKW?embedable=true これは私たちができる方法の 1 つですが、私の好みではありません。  Flexbox を使用して項目を中央揃えにする 可能であれば、私は位置決めよりも Flexbox を使用することを好みます。なぜなら、Flexbox のほうが簡単で、必要なコード行が少なく、位置決めのコンテキストも不要であり、正直に言うと、より優れた、より現代的なソリューションのように感じられるからです。例を見てみましょう。 わかりました。同じポイントから開始します。赤い境界線を持つ外側の div があり、次に内側の強い要素があります。  まず、div をディスプレイ付きの flex コンテナー (flex) にします。次に、  プロパティと center の値を使用して、項目を X 軸に沿って中央に揃えることができます。そして最後に重要なことですが、  プロパティと同じ center 値を使用して、y 軸に沿って整列できます。 justify-content align-items     div { display: flex; justify-content: center; align-items: center; } アイテムは適切に中央に配置されており、今回はそこに到達するまでに 3 行のコードしか必要としませんでした。  Flexbox を使用した最終的な実際の例は次のとおりです。   https://codepen.io/brianmtreese/pen/bGZbWgW?embedable=true これは素晴らしいことですし、私も時々そうしなければならないことがありますが、アイテムを中央に配置する私のお気に入りの方法は、CSS グリッドを使用することです。繰り返しになりますが、その理由は、  よりもさらに簡単で、必要なコードがさらに少ないからです。 flex グリッドを使用して項目を中央に配置する OK、赤いボックスと内側のアイテムの開始点は同じです。  今回は、 div を、  値が のグリッド コンテナーにします。ここで素晴らしいのは、必要に応じて、フレックスボックスの例で使用したものと同じ 2 つのプロパティを使用できることです。  と を追加できます。まったく同じように機能します。 display grid justify-content: center align-items: center   div { display: grid; justify-content: center; align-items: center; } ちょっと面白いですが、これはグリッドの動作方法であり、フレックスボックスと同じボックス配置プロパティを使用できます。でも、このままだとグリッドを使うメリットがなくなってしまいますよね？ 代わりにできることは、これらの配置プロパティを削除し、place-items プロパティで置き換えることです。そして、このプロパティに center の値を与えることができます。     div { display: grid; place-items: center; } これで、たった 2 行の CSS まで削減できました。  CSS グリッドを使用した最後の実際の例は次のとおりです。   https://codepen.io/brianmtreese/pen/zYbOwoM?embedable=true 結論 先ほども言いましたが、以前よりもずっと簡単になったのは確かです。ただし、これらのテクニックはすべて依然として非常に関連性があり、さまざまな状況で必要になる可能性があるため、念のためすべてを知っておくことをお勧めします。私は間違いなく、最小限のコードの CSS グリッドを好みます。それが機能しない場合は、次善の策としてフレックスボックスを使用します。どちらも機能しない場合は、配置を試してください。 でも公開されています。 ここ

Buy Me a Coffee

このオーディオは、ストーリーの元の言語で制作されています。

項目を中央揃えにするための 3 つの最新の CSS テクニック

About Author

コメント

ラベル

この記事は

Related Stories

AI/ML データレイクのリファレンスアーキテクチャを構築するためのアーキテクトガイド

ワークフローを10倍に向上させる方法: 必須アプリ17選

HackerNoon Coded: HackerNoonが最も活発に活動している上位10カ国

目に見えない層: ユーザーインタビューがかけがえのない資産である理由

AI/ML データレイクのリファレンスアーキテクチャを構築するためのアーキテクトガイド

ワークフローを10倍に向上させる方法: 必須アプリ17選

HackerNoon Coded: HackerNoonが最も活発に活動している上位10カ国

目に見えない層: ユーザーインタビューがかけがえのない資産である理由

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps