[TOC] # [css水平居中](https://www.cnblogs.com/lichihua/p/8989958.html) 在知道父容器的寬度的時候我們可以根據margin:0 auto；來進行水平居中 在父容器寬度不知道的情況下：那么光是margin:0 auto是不管用的 那么我們可以設置 display:table;margin:0 auto；并且父容器需要overflow:hidden；來進行水平居中 （表格具有關聯收縮、垂直居中等特性） 但是設置了display:table;后他們的寬度和高度會會失效 （ie*-無效） 第二種辦法：外層使用text-align：center;我們知道text-align:center是讓里面的內聯元素居中，很顯然在外層設置text-align:center后，我們讓里面的元素變成內聯元素即可，則可以對里面元素使用display:inline-block;*display:inline(兼容IE6-7) **總結：** * 外層元素{text-align:center;} * 內層元素div{display:inline-block;text-align:left;} 還有一種：不推薦 外層設置相對定位且浮動，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%;} ```  # [垂直居中](https://www.cnblogs.com/lichihua/p/8433549.html) # 文字居中 ``` text-align: center;水平居中 line-height:35px;垂直居中 ``` div是塊級元素,如果不設置他的明確的寬度,那他就等于父元素的寬度,如果要讓其它隨著子元素的變化而變化,需要改變他的屬性,給他加上這個css屬性即可display:inline-block 或干脆把div替換為span解決