几种兼容性较好的CSS元素水平垂直居方法

CSS元素水平垂直居中

如下代码，父元素类名为外部DIV father 子元素类名为内部DIV son

<div class="father">
    <div class="son">子元素</div>
</div>

父元素的宽高都是可以固定或者不固定的，这点需要程序员自身根据实际去设定，一般来说父元素的宽高都会被固定，如此定义下，我们才好对其子元素进行水平垂直居中的操作。

居中子元素宽高固定的方法

1.父relative+子absolute+设置子元素负值外边距(宽高的一半)

.father {
    position: relative;
}
.son {
    position: absolute;;
    top: 50%;
    left: 50%;
    width:100px;
	height:100px;
    //设置为宽高的一半
    margin-left: -50px;
    margin-top: -50px;
}

绝对定位的百分比是相对于父元素的宽高，通过这个特性可以让子元素的居中显示，但绝对定位是基于子元素的左上角，期望的效果是子元素的中心居中显示。

为了修正这个问题，可以借助外边距的负值，负的外边距可以让元素向相反方向定位，通过指定子元素的外边距为子元素宽度一半的负值，就可以让子元素居中了。注意此处父元素设置的是relative,而其子元素设置的是absolute!

此方式兼容性较好，就是需要我们提前知晓子元素的宽高。

2.父relative+子absolute+设置子元素各方向距离为0+margin:auto

.father {
    position: relative;
}
.son {
	//需要设置宽高
	width:100px;
	height:100px;
    position: absolute;;
    //各方向距离为0  不能不写
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}*

这种方式通过设置各个方向的距离都是0，此时再讲margin设为auto，就可以在各个方向上居中了，此方法在WEB页面的布局也是常用的，在页面缩放时也可以有较好的兼容性。

居中子元素宽高不固定的方法

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

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

移动端水平垂直居中推荐

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

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

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

总结

下面对比下各个方式的优缺点：

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