固定位置要素を水平方向および垂直方向の中央に配置するにはどうすればよいですか?

位置:固定要素を中央に配置する方法

問題:

「位置:固定;」を中央に配置するmargin: 5% auto;

解決策:

これを実現するには、いくつかの方法があります:

アプローチ 1: 固定幅と高さ

1. div の左上隅を中央にするには、top と left を 50% に設定します。
2. margin-top と margin-left をマイナスの半分に設定します。 div の高さと幅を変更して中心を方向に移動します。中央。

position: fixed;
width: 500px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px; /* Negative half of height */
margin-left: -250px; /* Negative half of width */

アプローチ 2: 動的幅および/または高さ

1. マージンの代わりに変換を使用し、マイナスの半分に設定します。 div の相対的な幅とheight.

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

アプローチ 3: 幅は固定、ただし垂直方向のセンタリングは気にしない

1. 左: 0 と右: を追加します。要素に 0 を設定し、margin-left と margin-right を auto に設定します。

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

以上が固定位置要素を水平方向および垂直方向の中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。