垂直居中的三种方法及其优缺点

<div class="parent">
	<div class="child"></div>
</div>

父元素，子元素高度不一定

第一种：

.parent{
	display: table-cell;
	vertical-align: middle;
}

优点： 兼容性好

缺点：IE6-7 需改HTML结构

第二种：

.parent{
	display: relative;
}

.child{
	position: absolute;
	left: 50%;
	transform: translate(-50%);
}

优点：不影响父元素

缺点：兼容性

第三种：

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

优点：只需设置父元素

缺点：兼容性