動的寸法を使用して「position:fixed」要素を中央に配置するにはどうすればよいですか?

動的な寸法を使用して Positioned:fixed 要素を中央に配置する

position:fixed を使用して画面の中央に配置する必要があるポップアップ ボックスを作成する場合、水平方向と垂直方向の両方を中央に配置することは課題となる可能性があります。これはマージン:5% 自動のためです。要素を水平方向にのみ配置します。

目的の配置を実現するには、次の次の戦略を使用できます。

方法 1: 既知の幅と高さ

div の幅と高さがわかっている場合は、top プロパティと left プロパティを 50% に設定できます。さらに、中心を中央に向かって移動するには、margin-top と margin-left を div のそれぞれの寸法のマイナスの半分に設定する必要があります。

position: fixed;
width: 500px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -250px;

方法 2: 動的幅と高さ

div の寸法が動的である場合、マージンの代わりにtransformプロパティを使用できます。変換は、div の相対的な幅と高さの負の半分に設定されます。

position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

方法 3: 固定幅と不定の垂直方向の配置

div の幅の場合は固定されており、垂直方向の配置は重要ではありません。 left:0 および right:0 を margin-left および margin-right とともに要素に追加できます。 auto.

position: fixed;
width: 500px;
margin: 5% auto; /* Only centers horizontally not vertically! */
left: 0;
right: 0;

これらのメソッドを実装すると、動的な寸法を持つposition:fixed要素を画面の中央に配置して、ビューポートのサイズに関係なく固定されたままにすることができます。

以上が動的寸法を使用して「position:fixed」要素を中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。