ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS を使用して固定位置 DIV を中央に配置するにはどうすればよいですか?

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

Linda Hamilton
リリース: 2024-11-28 20:02:11
オリジナル
940 人が閲覧しました

How to Center a Fixed-Position DIV Using CSS?

固定位置 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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート