「left: 50%」が正しく機能するのに、「top: 50%」が要素を垂直方向の中央に配置しないのはなぜですか?

CSS のトップ パーセントが期待どおりに動作しない: 理由の詳細を調べる

レスポンシブなレイアウトを追求していると、「トップ」というエラーが発生します。 :50%" は期待どおりに機能しませんが、"left:50%" は問題なく機能します。なぜこのようなことが起こるのでしょうか?

動作を理解するには、次の親要素と子要素の構造を考慮してください:

<div>

問題を解決する鍵は、「top」プロパティがどのように動作するかを理解することにあります。 CSS。 「50%」などのパーセンテージを指定すると、親コンテナの高さを基準にして計算されます。ただし、このシナリオでは、親コンテナには明示的な高さが定義されていないため、「top」プロパティは事実上、未知の値に対して計算されます。

これに対処するには、親コンテナの固定の高さを確立する必要があります。 。これにより、子要素の上部の位置に必要な参照点が提供されます。

例 1: 高さの定義

<div>

親に 200px の高さを指定することによってdiv では、子 div の上部の位置が 200px の 50% として正しく計算されるようになり、予想される垂直方向の結果になります。

例 2: コンテナのストレッチ

別のアプローチとして、親コンテナをストレッチして利用可能なスペース全体を占有することが含まれます:

<div>

コンテナーの上下左右のプロパティを定義すると、コンテナーは利用可能なスペースを満たすまで拡張されます。次に、子 div の上部の位置が、引き伸ばされたコンテナを基準にして計算され、同じセンタリング効果が得られます。

以上が「left: 50%」が正しく機能するのに、「top: 50%」が要素を垂直方向の中央に配置しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。