CSS を使用して固定および絶対配置の Div を正確に中央に配置するにはどうすればよいですか?

固定位置 Div の正確な位置合わせを実現する

固定位置の要素をセンタリングすることは、特に「半角マージン」トリックの制限に遭遇した後では困難になることがあります。配置された要素。幸いなことに、CSS3 はこの問題に対する解決策を提供します。

固定位置 Div の解決策:

固定位置 Div を中央に揃えるには、transform プロパティを利用します:

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

このメソッドは、div の位置を左端の隅から左端の隅まで効果的に移動します。 center.

改善された絶対位置アライメント:

絶対的に配置された div を中央に配置しようとする際に、より良いアプローチが存在します:

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

これを使用することにより、この方法では、div は、サイズや上部の位置に関係なく、水平方向と垂直方向の両方で中央に配置されます。

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