居中有2种居中！ 水平居中和垂直居中，分类一下！
一、水平居中
1.行级元素：可以在父元素设置 text-align：center。
另外，行级元素不能设置margin-top/bottom但是可以设置margin-left/right。当然也可以通过text-indent来改变行级元素在水平方向的缩进但是最好还是用 text-align：center。
2.块级元素：有很多种情况。
（1）没有浮动，没有定位：margin： 0 auto
（2）有浮动，没有定位：有浮动就会脱离文档流，所以margin：0 auto就不行了，给父级也加浮动？
测试：给父级加浮动后，再给浮动子级加margin：0 auto ，子级能居中吗？
结果如下：
显而易见是无用的，这时我们应该怎么居中这个元素呢？
很简单，我们在子级元素外层再包裹一层div即可，然后再设置div：margin ：0 auto，注意div的宽度。
结果如下：
成功居中了，如果有多个浮动元素想居中，我们可以把它们都放在div包裹起来，注意div的宽度要等于每个元素的宽度之和！
如下：
（3）相对定位，有无浮动均可：position：relative；left：50%；margin-left：- width/2（负边距法）
（4）绝对定位，有无浮动均可：position：absolute；
第一种方式（负边距法）：left：50%；margin-left：- width/2。
第二种方式：必须有宽度（宽度可以为百分比）设置 left：0；right：0；margin： 0 auto（加分！）
二、垂直居中
（1）行级元素：line-height : 跟高度一致
（2）块级元素：① display：table-call 再用vertical-align：center；
② 负边距法
③ 必须有宽度（宽度可以为百分比），设置 position：absolute，设置top：0；bottom：0；margin：auto 0；
看到这我们知道了：
设置属性有position：absolute的元素的水平垂直居中可以这样：
top：0；bottom：0； left：0；right：0；margin：auto；
要求有宽度，但是宽度可以为百分比，适用于移动端。