前端页面布局中常用的垂直居中效果的实现总结

现在总结三种比较实用的垂直居中的方法

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
如果大家有好的方法欢迎指教。

你可能感兴趣的:(前端页面布局中常用的垂直居中效果的实现总结)