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 {
     100%;
    display: -webkit-box;
    -webkit-box-pack: center;
}

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

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

五、使用table

.grandfather {
     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原理相同，都是将多余部分移回原位，但是不需要计算具体大小，用百分比适配性好