レスポンシブ レイアウトで「top: 50%」が要素を正しく中央に配置しないのはなぜですか?

レスポンシブ レイアウトで CSS "top: 50%" が期待どおりに機能しないのはなぜですか?

レスポンシブ Web デザインで CSS にパーセンテージを使用する「top」などのプロパティは、さまざまな画面サイズにわたって要素の位置を維持するために重要です。ただし、「top: 50%」が要素を正しく配置しない場合に問題が発生する可能性があります。

次の HTML および CSS コードを考えてみましょう:

<div>

ここでの問題は、「top: 50%」が要素を正しく配置しないことです。 " 子 div のプロパティは親 div の高さを参照しますが、これは未定義です。その結果、子 div はビューポートの上部から 50% の位置に配置されなくなります。

これを解決するには、親 div の特定の高さを定義する必要があります。例:

<div>

これで、子 div は、高さが定義された親 div の上部から 50% の位置に配置されます。

あるいは、親を引き伸ばすこともできます。 div を使用して、「上」、「下」、「左」、「右」を設定してビューポート全体を埋めます。プロパティ:

<div>

親 div の寸法を定義するか、ビューポート全体に拡張することで、「上部: 50%」のようなパーセンテージで要素をレスポンシブ レイアウトで正しく配置できるようになります。

以上がレスポンシブ レイアウトで「top: 50%」が要素を正しく中央に配置しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。