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

<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;}

优点：只需设置父元素

缺点：兼容性