為什麼 `margin: auto` 不絕對居中或固定位置的元素？

為什麼Margin:auto 單獨無法使定位元素居中

嘗試使用以下位置將div 元素在父容器中居中時： Absolute 或position: 固定屬性，單獨使用margin: auto 可能不夠。

理解CSS 規範

根據CSS 規範，對於position 的元素：相對或位置：靜態（正常流程），將margin-left 和margin-right 設定為自動將元素相對於其包含區塊水平居中，因為它們的使用值變得相等。但是，這不適用於position:absolute或position:fixed的元素。

對於絕對或固定定位的元素，其中left、width、right三者均為auto，則使用margin-left的值和 margin-right 設定為 0 以防止居中。要讓這些元素居中，必須定義左、右或寬度的值。

設定左、右和寬度的效果

如果左、右，和寬度都已定義，邊距得到相等的值，從而導致居中。省略任何這些值都會導致元素偏離中心對齊。

不同情況的示範

下表示範了各種情況，如 CSS 中所述規格：

Margin Setting	Centring
margin-left: auto; margin-right: auto	Yes (flow element)
margin-left: auto; margin-right: auto	No (absolute/fixed element)
left: auto; right: auto; width: auto	No (margin set to 0)
left: 0; right: 0; width: auto	No (margin set to 0)
right: auto; left: auto;	No (margin set to 0)
left: auto; right: auto; width: 200px	Yes (equal margins)
left: 0; width: auto	Yes (equal margins)
right: 0; width: auto	Yes (equal margins)

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