垂直居中 方法总结

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

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

 

posted @ 2016-08-21 18:53  nostic  阅读(137)  评论(0编辑  收藏  举报