现在总结三种比较实用的垂直居中的方法
1、多个块级元素垂直居中，利用绝对定位以及 transform ，适用于不知道元素的宽度盒高度
.parent{position: relative;}
.child{
position: relative;
top: 50%;
transform: translateY(-50%);
}
2、使用diplay：table-cell，其实这个就是把其变成表格样式，再利用表格的样式来进行居中，适用于未知元素高度的情况，也很方便。
.parent{display: table-cell;vertical-align: middle;}
3、使用flex布局，现在主流浏览器已经都支持flex布局了，只不过需要给所要垂直居中的元素添加一个父div，给父div使用样式即可，挺方便的，这个兼容性也最好。
.parent{display: flex;align-items: center;}
这个方法兼容性也很强。
目前在实现垂直居中的效果主要使用这两种方法，当然实现方法有很多种，适合自己的就是好的
给大家推荐一些帖子，里面有多种方法供大家参考，https://www.zhihu.com/question/20543196，
https://juejin.im/entry/58aaaf03ac502e006972fd75
如果大家有好的方法欢迎指教。
网友评论