Div を別の Div 内で垂直方向の中央に配置するにはどうすればよいですか?

別の Div 内の Div を垂直方向に中央揃えにする

Div を別の Div 内で中央揃えにしたい場合、最初のアプローチは、margin-top と margin-left の値を使用することです。 、以下の CSS 例に見られるように:

#outerDiv {
    width: 500px;
    height: 500px;
    position: relative;
}

#innerDiv {
    width: 284px;
    height: 290px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -147px;
    margin-left: -144px;
}

ただし、この方法では、内部 div のサイズが変わるたびに調整が必要になります。変化します。より一般的な解決策として、次のオプションを検討できます。

Vertical Align Middle

vertical-align の使用: middle は、親コンテナ内で div を垂直に配置します。この手法を使用するには:

1. 親コンテナを表示: table-cell に設定し、vertical-align: middle で垂直方向に配置します。
2. 内部 div を表示: inline- に設定します。ブロック。

モダン解決策:

1. Transform

Transformations は、より簡単なアプローチを提供します。

1. 内側の div を上: 50%、左: 50% で絶対位置に配置します。
2. 変換:translate(-50%,-50%) して両方の div を中央に配置します寸法。

2. Flexbox

Flexbox は、その柔軟性により、最も簡単なソリューションを提供します。

1. 表示する親コンテナを設定します: flex.
2. Justify-content を使用します。 : center と align-items: center から水平方向と内側の div を中央揃えにします。

選択する具体的な方法は、互換性の要件と好みによって異なります。

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