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

一、使用margin:

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

或者：

1     margin: auto;

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

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

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

三、使用伸缩盒flex

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

1     display: flex;
2     justify-content: center;
3     align-items: center;

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

四、-webkit-box

1 #d5 {
2      100%;
3     display: -webkit-box;
4     -webkit-box-pack: center;
5 }

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

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

五、使用table

 1 .grandfather {
 2      100%;
 3     height: 100%;
 4     display: table;
 5 }
 6 .father{
 7     display: table-cell;
 8     text-align: center;
 9 }
10 .son {
11     display: inline-block;
12     background: green;
13 }

这里的最内部盒子son居中

六、使用position和transform

1 #center6{
2     position:absolute;
3     left:50%;
4     transform:translateX(-50%);
5     background:#08ffbc;
6 }

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