`margin: 0 auto;` 如何將元素在其容器內置中？

Auto：將元素在其容器內居中

使用auto 作為第二個參數定義margin 屬性時，可以毫不費力地設定元素的樣式位於其父容器的中心。發生這種情況的原因是：

• 自動計算：瀏覽器自動決定左右邊距，平均分配它們之間的可用空間。
• 相等Margins：左右邊距保證大小相同，保證對稱定位。

Margin 屬性細分：

margin: 0 auto;

• 0 將頂部和底部邊距設為 0。
• auto自動計算左右邊距以居中

範例：

考慮一個寬度為100px 的父容器和一個寬度為50px的子元素。 auto 屬性將計算子元素邊距之間的可用空間：

freeSpace = 100 - 50 = 50px
equalShare = 50 / 2 = 25px

結果：

margin-left: 25px
margin-right: 25px

子元素現在將在父容器中居中。可以透過這個 [jsFiddle]（連結到 jsFiddle）觀察這種定位的實際情況。注意，auto屬性只需要指定子物件的寬度即可生效。

以上是`margin: 0 auto;` 如何將元素在其容器內置中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！