DIV水平方向居中的几种方法

一、使用margin:

1 #center0 {
2     background: red;
3     margin: 0 auto;
4 }

或者：

     margin: auto;

这样的前提是父盒子里没有其他盒子。

二、使用position（有些地方不太好用）

#center1{
    position: absolute;
    left:50%;
    margin-left: -(div宽度的一半)
}

三、使用伸缩盒flex

在需要居中的盒子外面再包一层盒子，对这个父盒子进行设置：

     display: flex;
     justify-content: center;
     align-items: center;

伸缩盒是个很强大的工具，对屏幕适配性有很好的支持

四、-webkit-box

 #d5 {
     width: 100%;
     display: -webkit-box;
     -webkit-box-pack: center;
 }

给父元素设置上述代码。这个属性比较奇特，去查了一下，有些争议，表示也无法深入理解，可以参考这里的讨论：

https://www.zhihu.com/question/22991944

五、使用table

 .grandfather {
     width: 100%;
     height: 100%;
     display: table;
 }
 .father{
     display: table-cell;
     text-align: center;
 }
 .son {
     display: inline-block;
     background: green;
 }

这里的最内部盒子son居中

六、使用position和transform

 #center6{
     position:absolute;
     left:50%;
     transform:translateX(-50%);
     background:#08ffbc;
 }

这个跟position+margin原理相同，都是将多余部分移回原位，但是不需要计算具体大小，用百分比适配性好