コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > CSSチュートリアル > CSSを使用してDivを親内で垂直方向に中央揃えする方法は?

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

Patricia Arquette
リリース： 2024-12-15 00:26:13
オリジナル
838 人が閲覧しました

How to Center a Div Vertically within its Parent Using CSS?

を中央揃えにする方法CSS を使用して親内で垂直方向

Web デザインの領域では、要素を垂直方向と水平方向に正確に配置する機能は、視覚的に魅力的でユーザーフレンドリーなインターフェイスを作成するために重要です。垂直方向の配置が重要になる一般的なシナリオの 1 つは、

を中央に配置したい場合です。

質問:

を垂直方向に配置するにはどうすればよいですか? CSS を使用していますか?

回答:

最新のアプローチ (フレックスボックス):

垂直方向の配置に最も効果的な方法は次のとおりです。強力な CSS レイアウト モジュールである flexbox を活用します。親要素の表示プロパティを flex に設定し、align-items を center に設定すると、すべての子要素を親内で垂直方向に整列できます。

#parent-element {
    display: flex;
    align-items: center;
}
ログイン後にコピー

このアプローチは、信頼性が高く、ブラウザー間互換性のあるソリューションを提供します。

従来のメソッド (古いブラウザ用):

古いブラウザフレックスボックスをサポートしていないブラウザの場合、代替方法は次のとおりです。