CSS で「top: 50%」が期待どおりに機能しないのはなぜですか?

CSS パーセント オフセット: 「top: 50%」が機能しない理由を理解する

レスポンシブ CSS レイアウトの領域では、 「トップ」プロパティのパーセンテージ値は、場合によっては難しい場合があります。 「左: 50%」は期待どおりに動作しますが、「上: 50%」を使用すると予期しない結果が生じます。

原因

重要なのは、 「top」プロパティが計算されます。コンテナの幅を参照する「left」とは異なり、「top」はコンテナの高さを参照します。したがって、コンテナの高さが定義されていない場合、「top: 50%」の値は事実上 0px の 50% となり、垂直方向の変位は発生しません。

解決策

この問題を解決するには、主に 2 つのアプローチがあります。

1. 親コンテナのディメンションを定義します。
   コンテナの高さと幅の値を明示的に指定します。パーセンテージベースのオフセットのリファレンスを提供します。例:

   <div>

2. 親コンテナをストレッチします:
   または、絶対値を使用してコンテナの高さと幅を定義し、コンテナの端までストレッチします。含まれる要素:

   <div>

これらのソリューションのいずれかを実装すると、「top: 50%」が意図したとおりに機能し、レスポンシブ レイアウト内で垂直方向の中央揃えが提供されるようになります。

以上がCSS で「top: 50%」が期待どおりに機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。