為什麼 Margin: Auto 並不總是將元素居中？

Margin:auto 不足以使定位元素居中

當嘗試水平居中絕對或固定定位元素時，margin: auto 屬性單獨可能還不夠。

對於流內元素（沒有位置的元素：絕對或固定），僅設定寬度就足夠了。 Margin：auto 會自動平衡左右邊距，使元素居中。

但是，對於定位元素，情況就不同了。根據 CSS 規格：

• 如果 left、right 和 width 均為 auto，則 margin-left 和 margin-right 都設定為 0，導致不居中。
• 如果left、right 和 width 不都是 auto，margin-left 和 margin-right 設定為相等的值，這會導致居中。

要讓定位元素居中：

1.設定左、右和寬度

position: absolute;
left: 0;
right: 0;
width: 70px;

2。將 margin-left 和 margin-right 設為 auto （可選）

position: absolute;
left: 0;
right: 0;
width: 70px;
margin-left: auto;
margin-right: auto;

將 left 和 right 設定為 0 實質上定義了元素可以移動的左右邊界。 Margin: auto 然後平衡這些邊界之間的空間。

範例：

考慮一個寬度為200px 的父元素和一個寬度為絕對定位的子元素70px:

parent {
  width: 200px;
  position: relative;
}
child {
  position: absolute;
  left: 0;
  right: 0;
  width: 70px;
  margin: auto; /* Optional */
}

當使用margin: auto 時，子元素相對於父元素水平居中。這是因為計算出的邊距（左邊距和右邊距）相等，這有效地將子項定位在可用空間的中間。

以上是為什麼 Margin: Auto 並不總是將元素居中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！