既知および未知の高さで垂直および水平のセンタリングを行う方法

次の記事では、サブボックスを親ボックス内で垂直方向および水平方向の中央に配置するためのさまざまなソリューション (既知のサブ要素の高さと未知のサブ要素の高さ) を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

(推奨チュートリアル: CSS ビデオ チュートリアル )

1. オプション 1 (子の幅と高さ)

1. 子要素の絶対位置をオンにし、親要素の相対位置をオンにします

2. 左、右、上、および左を設定します。子要素の一番下の属性を 0 に、マージンを auto

または (手順 2 と 3 のいずれかを選択する必要があることに注意してください)

3. サブ要素の左を 50 に設定します。 %、top を 50% に設定し、margin-left をサブ要素の幅/2px に設定します。margin-top を子要素の高さ/2px に設定します

#2. オプション 2 (子要素の幅と高さが不明)

1 . 子要素の絶対位置をオンにし、親要素の相対位置をオンにします (これは手順はオプション 1) と同じです)

2. 子要素の左要素を 50% に設定し、上要素を 50% に設定し、transform(-50% ,-50%) に変換を設定します。

特記事項: 子要素では絶対配置がオンになっており、親要素でも非静的配置 (相対相対配置または絶対配置) をオンにする必要があります。 request) を使用すると、子要素の絶対位置を親要素を基準にして相対的に配置できます。

最後に、各ソリューションの実装原則は異なるため、弁証法的に見る必要があります。

プログラミング関連の知識について詳しくは、

プログラミング ビデオをご覧ください。 ！

以上が既知および未知の高さで垂直および水平のセンタリングを行う方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。