固定および絶対配置された Div を完全に中央に配置するにはどうすればよいですか?

固定位置 div の中心揃えを固定する

絶対位置の要素に対して従来の方法を使用すると、固定位置 div の中心揃えが困難になる可能性があります。 left プロパティを 50% に設定し、margin-left を div の幅の半分に設定するという「ハック」は、固定位置の div では失敗します。

この問題を解決して正確なセンタリングを実現するには、CSS3 を利用する方が良い解決策です。変換プロパティ。明示的な幅を設定しなくても、このメソッドは div を効果的に中央に配置します。

.centered {
    position: fixed;
    left: 50%;
    transform: translate(-50%, 0);
}

このソリューションは、div の中心をビューポートの中心に揃え、ブラウザ ウィンドウのサイズが変更されても中央に維持されるようにします。 。さらに、transform プロパティは最新のブラウザで広くサポートされています。

ボーナス: 絶対的に配置された要素の中央揃えの改善

絶対的に配置された要素の場合、次のアプローチを使用すると、より正確で汎用性の高いセンタリング方法:

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

ここでは、要素は絶対的に位置決めされ、整列されます。自身の高さと幅に基づいて位置を変換します。この方法では、マージン調整を必要とせずに正確なセンタリングが可能です。

以上が固定および絶対配置された Div を完全に中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。