如何居中一个元素？

居中有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；

要求有宽度，但是宽度可以为百分比，适用于移动端。