margin 實現水平居中，垂直居中原理

首先了解下，margin的auto屬性的做用是用來分配剩餘空間，因此對於有剩餘空間的元素纔有效哦（塊及元素）。好比圖片設置margin: 0 auto是無效的，由於圖片是內聯元素，不是佔一整行，沒有剩餘空間。

1.塊及元素水平方向居中：

原理：兩側auto，則平分剩餘空間，至關於水平居中。

div { margin-right: auto;  margin-left: auto; width:200px;  height: 200px } 固然也能夠這樣寫 div { margin: 0 auto; width:200px;  height: 200px }  跟垂直方向無關，垂直方向可隨便設置，只要水平左右都設置爲auto便可。注意width寬度必定要設置，沒有寬度的塊默認就是100%，就沒有auto值了。

代碼以下：

2.塊及元素水平居右：

原理：一側auto，一側沒設置，則設置auto的一側分配全部剩餘空。

想讓div居右顯示，已經很簡單了。把margin-left 的值設置爲auto 便可。代碼以下：

div { width:200px; height: 200px; margin-left: auto;}

原理：一側定值,一側auto,auto爲剩餘空間大小。代碼以下：

div { width:200px; height: 200px; margin-left: auto; margn-right: 100px; }

以上方法只能實現水平方向，對於垂直方向是無效的，由於垂直方向沒有剩餘空間，這點再也不解釋了。

3.想要實現垂直方向的居中能夠用絕對定位。

div  {
                background: #FF0000;
                width: 200px;
                height: 200px;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                margin: auto;
            }

margin: auto;  是關鍵，沒有設置此項，也不會水平垂直居中哦。

解釋下原理:

1.在普通內容流中，margin:auto的效果等同於margin-top:0;margin-bottom:0。

2.position:absolute使絕對定位塊跳出了內容流，內容流中的其他部分渲染時絕對定位部分不進行渲染。

3.爲塊區域設置top: 0; left: 0; bottom: 0; right: 0;將給瀏覽器從新分配一個邊界框，此時該塊塊將填充其父元素的全部可用空間，因此margin 垂直方向上有了可分配的空間。

4.再設置margin 垂直方向上下爲auto，便可實現垂直居中。（注意高度得設置）。