CSSを使用してすべてのブラウザでdiv要素を垂直方向の中央に配置するにはどうすればよいですか?

CSS を使用するすべてのブラウザで div 要素を垂直方向の中央に配置するには、Flexbox を使用します。 CSS3 は、別のレイアウト モードであるフレキシブル ボックス (一般に Flexbox として知られています) を提供します。このモードを使用すると、複雑なアプリケーションや Web ページのレイアウトを簡単に作成できます。 float とは異なり、Flexbox レイアウトでは、ボックスの方向、配置、順序、サイズを完全に制御できます。

タグは、HTML 内の要素のコンテナーです。 div 内にはあらゆる種類のコンテンツを配置できます。まず要素を追加してから、CSS を使用してスタイルを設定します。 div は垂直方向にのみ中央に配置できますが、水平方向には中央に配置できます。

div を垂直方向の中央に配置するには、flex 属性の align-items 属性を使用します。 div を中央に配置するには、値を center に設定します。以下の例では、中心値 -

を持つ align-items 属性を使用して、div の 1 つを中央揃えに設定します。 リーリー

次に、同じ div デモ 2 のコンテンツを中央揃えに設定します -

うわー

例

次に、すべてのブラウザの CSS を使用して div 要素を垂直方向に中央揃えにする例を見てみましょう -

ああああ

以上がCSSを使用してすべてのブラウザでdiv要素を垂直方向の中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。