ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSを使用してDivを親内で垂直方向の中央に配置する方法は?

CSSを使用してDivを親内で垂直方向の中央に配置する方法は?

Mary-Kate Olsen
Mary-Kate Olsenオリジナル
2024-12-11 01:38:10469ブラウズ

How to Vertically Center a Div Within Its Parent Using CSS?

を垂直方向に中央揃えCSS

を使用した親要素内 このクエリでは、ユーザーは、「Login」親 div 内の「Username」と「Form」div を垂直方向に整列させるための支援を求めています。彼らは「vertical-align: middle;」を使用しようとしました。

解決策

現代のブラウザで div を垂直方向に中央揃えするための最適な解決策は Flexbox です。

#Login {
    display: flex;
    align-items: center;
}

Flexbox がサポートされている場合が欠けている場合 (IE 9 以前など)、古い方法によるフォールバック オプションは次のとおりです。必須。

追加リソース

  • [Flexbox のブラウザ サポート](https://caniuse.com/?search=flexbox)
  • [ガイドフレックスボックス](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
  • [CSS フレキシブル ボックスの使用](https://developer.mozilla.org/en -US/docs/Web/CSS/CSS_Flexible_Box_Layout/)

以上がCSSを使用してDivを親内で垂直方向の中央に配置する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。