margin:auto 的作用機制。

使用margin:auto居中，是css的基本操作。但會發現時不時的失靈。 這篇文章是對該屬性的深度分析。

首先，以下事實（自動填充）必須明確

（1）有時候元素就算沒有設置width 或height，也會自動填充。例如：

<

（2）有時候元素就算沒有設置width 或height，也會自動填充對應的方位。例如：

div

自動填充失效的彌補

對元素（比如 <div>）如果設置元素的 width 或height，自動填充特性就會被覆蓋。/*例如：*/ div { width: 200px; }

此時，<div>元素寬度被限制成了200px，無法自動填充外部容器的可用寬度了。

假設外部的容器寬度大于200，則有寬度原本應該自動填充，現在因為width設置而閑置，而margin:auto 就是為了填充這個閑置的尺寸而設計的！

margin:auto 的填充規則如下。

（1）如果一側定值，一側auto，則auto 為剩余空間大小。
（2）如果兩側均是auto，則平分剩余空間。

實例：1. 拿規則（1）實現元素局右效果

.father {width:400px;height: 200px;background: pink; } .son {width: 200px;height: 150px;background: #ff00dd;margin-left: auto; }<div class='father'><div class='son'></div> </div>

因為son元素 margin-right缺省，而自動填充初始值0； margin-left：auto會占據所有空間

實例：2. 水平居中（兩邊均是auto即可）

實例：3. 垂直居中

絕對定位元素的margin居中。

.

此時.son 這個元素的尺寸表現為“格式化寬度和格式化高度”（top:0;right:0;bottom:0;left:0;），和<div>的“正常流寬度”一樣，同屬于外部尺寸，也就是尺寸自動填充父級元素的可用尺寸，
此時我們給.son 設置尺寸（width:200px;height:100px;）。那么寬高被限制，原本應該填充的空間就被空余了出來
這多余的空間就是margin:auto 計算的空間，因此，如果這時候我們再設置一個margin:auto：

總結

以上是生活随笔為你收集整理的margin background_margin:auto与布局展示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。