[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解决