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

HTML と CSSを使用して項目を中央揃えにするのは、以前は非常に困難でした。まあ、もうそれはありません。今ではそれを行うためのさまざまな方法があります。シナリオごとに異なるオプションが必要になる可能性があるため、これは良いことです。このビデオでは、項目を中央に配置する私のお気に入りの 3 つの方法を説明します。位置決めを使用し、次にフレックスボックスを使用し、最後に頼りになる CSS グリッドを使用します。

さて、それでは始めましょう。

Web 上のコンテナの中央に単純にアイテムを配置することがこれほど長い間困難だったというのは、本当に奇妙なことです。まあ、水平方向のセンタリングは簡単でしたが、垂直方向のセンタリングは近年までほぼ不可能でした。

CSS の配置を使用して項目を中央に配置する

CSS の位置決めを使用するこの最初の方法は、おそらく最も古くから存在していますが、新しいプロパティが登場するにつれて少し進化しました。例を見てみましょう。

ここには、赤い枠線を持つ別のコンテナの中央に配置したいボックスがあります。これは強力な要素であり、ここで見ている赤いボックスであるdiv要素内に直接配置されます。

このメソッドでは絶対配置を使用するので、それをstrong要素に追加しましょう。

 strong { position: absolute; }

これが正しく機能するには、 div項目を配置するための配置コンテキストを作成する必要があります。これを行うにはさまざまな方法がありますが、この例の最良のオプションは相対位置を使用することです。

 div { position: relative; }

これで、要素をdivの高さの 50 パーセント、幅の 50 パーセント以上に配置できるようになりました。上から下に配置するには、新しい論理プロパティinset-block-start 50 パーセントの値で使用できます。また、左から上に配置するには、同じ値 50% でinset-inline-startを使用します。

 strong { ... inset-block-start: 50%; inset-inline-start: 50%; } 

そうですね、正確に中央に配置されていませんね?

これは、項目をdivの中央に配置しましたが、その位置は左上隅に基づいているためです。ここで行う必要があるのは、アイテムを高さの 50 パーセント、幅の 50 パーセントを超えて戻すことです。こうすることで、正しく中央に配置されます。しかし、どうすればこれができるのでしょうか?

実はとても簡単なのです。新しい CSS translateプロパティを使用できます。最初の値は X 軸に沿って変換されます。 50% 戻る必要があるため、マイナスの 50% の値を追加します。そして、2 番目の値は Y 軸に沿って変換され、同じ値のマイナス 50 パーセントを与えます。

 strong { ... translate: -50% -50%; } 

そして、行きます。完璧に中央にあります。

これは、位置決めと変換を使用した最終的な実際の例です。

これは私たちができる方法の 1 つですが、私の好みではありません。

Flexbox を使用して項目を中央揃えにする

可能であれば、私は位置決めよりも Flexbox を使用することを好みます。なぜなら、Flexbox のほうが簡単で、必要なコード行が少なく、位置決めのコンテキストも不要であり、正直に言うと、より優れた、より現代的なソリューションのように感じられるからです。例を見てみましょう。

わかりました。同じポイントから開始します。赤い境界線を持つ外側の div があり、次に内側の強い要素があります。

まず、div をディスプレイ付きの flex コンテナー (flex) にします。次に、 justify-contentプロパティと center の値を使用して、項目を X 軸に沿って中央に揃えることができます。そして最後に重要なことですが、 align-itemsプロパティと同じ center 値を使用して、y 軸に沿って整列できます。

 div { display: flex; justify-content: center; align-items: center; } 

アイテムは適切に中央に配置されており、今回はそこに到達するまでに 3 行のコードしか必要としませんでした。

Flexbox を使用した最終的な実際の例は次のとおりです。

これは素晴らしいことですし、私も時々そうしなければならないことがありますが、アイテムを中央に配置する私のお気に入りの方法は、CSS グリッドを使用することです。繰り返しになりますが、その理由は、 flexよりもさらに簡単で、必要なコードがさらに少ないからです。

グリッドを使用して項目を中央に配置する

OK、赤いボックスと内側のアイテムの開始点は同じです。

今回は、 div を、 display値がgridのグリッド コンテナーにします。ここで素晴らしいのは、必要に応じて、フレックスボックスの例で使用したものと同じ 2 つのプロパティを使用できることです。 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 グリッドを使用した最後の実際の例は次のとおりです。

結論

先ほども言いましたが、以前よりもずっと簡単になったのは確かです。ただし、これらのテクニックはすべて依然として非常に関連性があり、さまざまな状況で必要になる可能性があるため、念のためすべてを知っておくことをお勧めします。私は間違いなく、最小限のコードの CSS グリッドを好みます。それが機能しない場合は、次善の策としてフレックスボックスを使用します。どちらも機能しない場合は、配置を試してください。