CSS を使用して固定位置 DIV を中央に配置するにはどうすればよいですか?

固定位置 DIV の中央揃え

Web ページ上の固定位置 DIV の中央揃えは、CSS を使用して要素を絶対配置することで簡単に行うことができます。 left: 50%、width: 400px;、margin-left: -200px; を含むハック要素の左マージンを幅の半分に設定することで、要素を効果的に中央に配置できます。

ただし、固定位置の DIV を扱う場合、このアプローチは失敗します。代わりに、要素の左端の角は、margin-left 宣言を無視して 50% に配置されます。この問題を解決し、固定位置の要素を中央揃えにするには、別の方法が必要です。

CSS3 Transform を使用した解決策

より効果的なアプローチでは、CSS3 の Transform プロパティを利用します。これにより、要素を配置せずに要素を正確に配置できます。マージンに依存します。

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

これではcode:

• position: fix は要素をページ上の固定位置に保ちます。
• left: 要素の左端をページの 50% マークに 50% 揃えます。
• transform: translation(-50%, 0) は、要素を負の水平方向に幅の半分だけオフセットし、効果的に中央揃えにします。

このメソッドは、固定幅または相対幅を指定しなくても、固定位置要素の正確なセンタリングを提供します。

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