css 垂直居中常用方法

项目中经常有需要块级元素垂直居中的情况，这里介绍几种常用的垂直居中方式；
下面是统一的html内容：

<div class="father">
	<div class="son"></div>
</div>

方法一：弹性盒（ flex ）布局：

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

这个方法是最简单的方法，只需要将父元素设置位弹性盒，并将它的侧轴设置为 center 就好了；适用于IE10及以上和其他的浏览器；

方法二：定位 + 移动：

.father{
	position:relative;
}
.son{
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
}

这个方法的原理是：子元素绝对定位，先将子元素定位到父元素的50%的位置，此时的子元素的上边界就在元素的中间，这时我们再将子元素向上移动自身高度的一半就可以居中了，如果知道子元素的宽高，这个transform可以替换成 margin-top: - 自身高度 / 2; 这个方法的兼容性比弹性盒好transform兼容 IE9及以上，如果使用的是 margin ,那么几乎兼容所有浏览器。

方法三：定位 + margin:auto :

.father{
	position:relative;
}
.son{
	position:absolute;
	top:0;
	bottom:0;
	margin:auto;
}

这个方法的原理是：子元素绝对定位，将它的 top 值和 bottom 值同时设置为0，因为子元素比父元素矮（否则也不用居中了），所以子元素是不可能同时满足 top 值和 bottom 值为0的，这时再给子元素设置 margin:auto 就可以了居中显示了；这个方法兼容性也几乎兼容所有的浏览器。

注：这个兼容性是我查询的 Can I Use 网站获取的信息，如果有错误的地方，麻烦评论留言。