[TOC] ## **只有一個子元素時水平居中：margin:0 auto;** 在**知道父容器的寬度**的時候我們可以根據`margin:0 auto；`來進行水平居中 在父容器寬度不知道的情況下：那么光是margin:0 auto是不管用的?? 那么我們子元素可以設置 display:table;margin:0 auto；并且父容器需要overflow:hidden；來進行水平居中? ? ?（表格具有關聯收縮、垂直居中等特性） >[danger]但是設置了display:table;后他們的寬度和高度會會失效? （ie\*-無效） ## **內聯元素(行內元素)水平居中** 第二種辦法：外層使用text-align：center;我們知道text-align: center是讓里面的內聯元素居中，很顯然在外層設置text-align:center后，我們讓里面的元素變成內聯元素即可，則可以對里面元素使用display:inline-block;\*display:inline(兼容IE6-7) >[danger]總結： 外層元素{text-align:center;} 內層元素div{display:inline-block;text-align:left;} ## [**傳統布局**](http://www.hmoore.net/a173512/qianduan/2016098) ## **還有一種水品居中：不推薦** 外層設置相對定位且浮動，left:50%，這樣左邊位置就偏移到了中間的位置;然后內層設置相對定位，left:-50%，這樣正好向左偏移自身寬度的一半，實現了居中。 內容居中但是容器沒居中啊，不能設置背景顏色 ``` <div class="wrap"> 　　<div class="inner">html:讓inner居中</div> </div> .wrap{float:left;/*自適應內容寬度*/position:relative;left:50%;} .inner{position:relative;left:-50%;} ```