水平垂直居中的方法及其优缺点

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

可以综合之前两篇文章的方法来做：

第一种：

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

优点：兼容性高

缺点：

第二种：

/* 2 */.parent{position: relative;}.child{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}

优点：简洁

缺点：兼容性不好

第三种：

/* 3 */.parent{display: flex;align-items: center;justify-content: center;}

优点：设置父元素即可

缺点：兼容性不好