现在总结三种比较实用的垂直居中的方法
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
如果大家有好的方法欢迎指教。