CSS `top: 50%` が要素を常に中央に配置しないのはなぜですか?

CSS の上位パーセントが期待どおりに整列しない

レスポンシブ CSS レイアウトでは、パーセンテージを使用して上位プロパティを設定すると予期しない動作をすることがあります。プロパティは意図したとおりに機能します。これは、親コンテナの寸法に関連してパーセンテージが計算される方法によるものです。

相対位置を理解する

絶対的に配置された要素に対して上または左のパーセンテージを設定する場合、親コンテナの高さおよび/または幅を定義することが重要です。これは、パーセンテージが親要素の寸法に基づいて計算されるためです。

解決策: 親コンテナの寸法を定義する

top:50% が期待どおりに機能するようにするには、次のようにします。親コンテナの高さを指定する必要があります。これにより、ブラウザはコンテナの中点を正確に計算し、それに応じて子要素を配置できます。

たとえば、親コンテナを次のように定義すると、

<div>

次に、子要素が要素の上部:50%;親コンテナの垂直方向の中央に配置されます。

代替解決策: 親コンテナを引き伸ばす

別のオプションは、次を使用して親コンテナを引き伸ばして、そのコンテナが含まれるスペースを埋めることです。上、下、左、右のプロパティ。このメソッドでは、top:50% プロパティで子要素を中央に配置することもできます。

<div>

明確な寸法を指定するか、親コンテナを拡張することで、top:50% がレスポンシブで正しく機能することを確認できます。 CSS レイアウト。子要素を正確に配置できます。

以上がCSS `top: 50%` が要素を常に中央に配置しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。