垂直居中 方法总结

  本文为思路提示篇，因此未详细述说代码，主要总结思路。

1. dispaly：table-cell；

   vertical-align：middle；

2. 

下面这个样式利用了translate来巧妙实现了垂直居中样式，需IE9+。

.center-vertical {
    position: relative;
    top: 50%;
    /*这里是相对父元素的宽高来说的，这里的50%；*/
    transform: translateY(-50%);
    或者margin一个负的自身高度
}

3. 父元素 relative 

    其本身absolute;方法同上，top：50%；

4. flexbox

 

转载于:https://www.cnblogs.com/nostic/p/5793274.html