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

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

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