絶対位置マージン自動発行について

「margin-left: auto」と「 margin-right: auto」と表示すると、マージンが何の効果もないように見えることに気づくかもしれません。この動作は、マージンが期待どおりに機能する「position:relative」とは異なります。この矛盾を理解するために、基礎となる仕組みをさらに深く掘り下げてみましょう。

要素が絶対的に配置されると、その要素はドキュメントの通常のフローから削除されます。これは、隣接する要素と相互作用しなくなり、そのサイズが明示的な寸法またはコンテナのサイズによってのみ決定されることを意味します。その結果、要素の幅が明示的に設定されていない場合、ブラウザによって計算される値は 'auto' になり、ほとんどの場合は 0 になります。

このシナリオでは、「margin-left: auto」と「margin-right: auto」は、左右のマージンを要素の幅の半分に設定して、要素の周囲にスペースを作成しようとします。ただし、要素の計算された幅は 0 であるため、計算されたマージン値も 0 になります。これが、マージンが効果がないように見える理由です。

対照的に、「position:relative」が使用される場合、要素は残ります。文書の通常の流れで。そのサイズは、その内容とフロー内で占めるスペースによって決まります。 「margin-left: auto」および「margin-right: auto」が適用される場合、マージンは要素の実際の幅 (この場合はゼロ以外) に基づいて計算されます。したがって、マージンが正しく適用され、要素がその要素を含む要素内で中央に配置されます。

絶対位置の要素を中央に配置するには、その幅と高さを指定し、「position:Absolute; left: 50」を使用します。 %; 変換: 変換(-50%, -50%);"コンテナ内の中央に配置します。このメソッドは、マージンが「自動」に設定されている場合でも、要素を目的の位置に正確に配置します。