4でdivを中央に配置する方法

div をセンタリングすることは、ソフトウェア開発者、特に CSS を含むフロントエンド テクノロジに苦労することが多い私のようなバックエンド開発者の間で長年のミームでした。

良いニュースは、新しい align-content CSS プロパティのおかげで、この闘いがついに終わったことです。もちろん、このプロパティは垂直方向の配置のみを処理します。詳細については後ほど説明します。

歴史的にどのように行われていたか

align-content が導入される前は、通常、垂直方向の配置を実現するには CSS グリッドまたは Flexbox を使用する必要がありました。

グリッドの例:

<div style="display: grid; align-content: center; justify-content: center; height: 100vh;">
    Hello World!
</div>

フレックスボックスの例:

<div style="display: flex; flex-direction: row; align-items: center; justify-content: center; height: 100vh;">
    Hello World!
</div>

justify-content プロパティは、グリッドとフレックスボックスの両方で div コンテンツの水平方向の配置に使用されます。通常の div の場合は、次のように text-align を使用するだけです:

<div style="text-align: center; height: 100vh;">
    Hello World!
</div>

2024 年にどうなるか

align-content の導入により、それぞれにいくつかの欠点があるグリッドとフレックスボックスに依存する必要がなくなりました。以下を使用すると、同じ結果をよりきれいに達成できます:

<div style="align-content: center; height: 100vh;">
    Hello World!
</div>

前述したように、これは垂直方向の配置のみを処理します。水平方向の配置については、信頼性の高い text-align プロパティを align-content と組み合わせて使用​​できます。

<div style="align-content: center; text-align: center; height: 100vh;">
    Hello World!
</div>

サポートされるブラウザの最小バージョンは Chrome 123、Firefox 125、Safari 17.4 であることに注意してください

リソース

• MDN Web ドキュメント: align-content
• 独自の CSS 垂直センターを作成

注目の画像のクレジット

• ChatGPT によって生成された注目の画像

以上が4でdivを中央に配置する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。