Web ページ上の固定位置 DIV の中央揃えは、CSS を使用して要素を絶対配置することで簡単に行うことができます。 left: 50%、width: 400px;、margin-left: -200px; を含むハック要素の左マージンを幅の半分に設定することで、要素を効果的に中央に配置できます。
ただし、固定位置の DIV を扱う場合、このアプローチは失敗します。代わりに、要素の左端の角は、margin-left 宣言を無視して 50% に配置されます。この問題を解決し、固定位置の要素を中央揃えにするには、別の方法が必要です。
より効果的なアプローチでは、CSS3 の Transform プロパティを利用します。これにより、要素を配置せずに要素を正確に配置できます。マージンに依存します。
.centered { position: fixed; left: 50%; transform: translate(-50%, 0); }
これではcode:
このメソッドは、固定幅または相対幅を指定しなくても、固定位置要素の正確なセンタリングを提供します。
以上がCSS を使用して固定位置 DIV を中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。