CSS实现水平垂直居中

为了实现上面的效果先来做些准备工作，假设HTML代码如下，总共两个元素，父元素和子元素
HTML：

<div class="wp">
    <div class="box size">水平垂直居中</div>
</div>

CSS：

注意：后面不在重复这段公共代码，只会给出相应提示

/* 公共代码 */
.wp {
    border: 1px solid red;
    width: 300px;
    height: 300px;
}

.box {
    background: green;    
}

.box.size{
    width: 100px;
    height: 100px;
}
/* 公共代码 */

1、absolute + 负margin

/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */

/* 定位代码 */
.wp {
    position: relative;
}
.box {
    position: absolute;;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
}

这是我比较常用的方式，这种方式比较好理解，兼容性也很好，缺点是需要知道子元素的宽高

2、absolute + margin auto

这种方式通过设置各个方向的距离都是0，此时再讲margin设为auto，就可以在各个方向上居中了

/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */

/* 定位代码 */
.wp {
    position: relative;
}
.box {
    position: absolute;;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

这种方法兼容性也很好，缺点是需要知道子元素的宽高

3、absolute + calc

/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */

/* 定位代码 */
.wp {
    position: relative;
}
.box {
    position: absolute;;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
}

这种方法兼容性依赖calc的兼容性，缺点是需要知道子元素的宽高

4、absolute + transform

/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */

/* 定位代码 */
.wp {
    position: relative;
}
.box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

这种方法兼容性依赖translate2d的兼容性

5、css-table

css新增的table属性，可以让我们把普通元素，变为table元素的现实效果，通过这个特性也可以实现水平垂直居中

.wp {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.box {
    display: inline-block;
}

这种方法和table一样的原理，但却没有那么多冗余代码，兼容性也还不错

6、flex

flex作为现代的布局方案，颠覆了过去的经验，只需几行代码就可以优雅的做到水平垂直居中

.wp {
    display: flex;
    justify-content: center;
    align-items: center;
}

目前在移动端已经完全可以使用flex了，PC端需要看自己业务的兼容性情况

7、grid

css新出的网格布局，由于兼容性不太好，一直没太关注，通过grid也可以实现水平垂直居中

.wp {
    display: grid;
}
.box {
    align-self: center;
    justify-self: center;
}

代码量也很少，但兼容性不如flex，不推荐使用

总结

下面对比下各个方式的优缺点，肯定又双叒叕该有同学说回字的写法了，简单总结下

PC端有兼容性要求，宽高固定，推荐absolute + 负margin
PC端有兼容要求，宽高不固定，推荐css-table
PC端无兼容性要求，推荐flex
移动端推荐使用flex

兼容性：

转自：https://juejin.im/post/5b9a4477f265da0ad82bf921