<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%);
}优点：简洁
缺点：兼容性不好
第三种：
默认flex-direction:row , 所以align-items 是设置垂直方向的， justif-content 是设置水平方向的；
/* 3 */
.parent{
display: flex;
align-items: center;
justify-content: center;
}
flex-direction:column 时， align-items 是设置水平方向的， justif-content 是设置垂直方向的，
优点：设置父元素即可
缺点：兼容性不好
