為什麼「margin: auto」不絕對居中或固定定位元素？

居中定位元素：超越'margin: auto'

在CSS 中，使用margin: auto 屬性居中元素可能會很棘手處理絕對定位或固定定位的元素。要理解這種行為，我們需要深入研究 CSS 規範。

流內元素居中

對於流內元素（沒有絕對或固定定位），將margin-left 和margin-right 設為auto 可實現相對於包含塊的水平居中。這是有效的，因為 CSS 規範規定，如果兩個邊距都設定為自動，則它們必須相等，從而導致元素居中。

絕對和固定元素居中

但是，當涉及到絕對或固定元素時，情況就不同了。 CSS 規範規定：

• 若 left、width、right 三者皆為 auto，則 margin-left 和 margin-right 值將會設為 0，防止自動居中。
• 如果 left、width 或 right 任何一個不是 auto，則其他兩個屬性的 auto 值設為 0，並且剩餘的邊距同樣計算。這會導致居中。
• 如果這三個屬性都不是 auto，則 margin-left 和 margin-right 再次設為 0，並應用特定規則來調整元素的位置。

將Left 和Right 設為零

要使用margin: auto 將絕對或固定元素居中，您還必須將left 和right 都設為0。這會強制瀏覽器進行計算margin-left 和 margin-right 相等，導致水平居中。

但是，如果您為 left 或 right 指定任何其他值，則除非您也設定寬度，否則不會發生居中。省略這些屬性之一將導致元素不居中。

真實範例

考慮以下程式碼：

在本例中，設定left: 0 和right: 0 可確保div 始終與框的左右緣齊平。 margin: auto 屬性然後將 div 在框中水平居中。

以上是為什麼「margin: auto」不絕對居中或固定定位元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！