垂直居中 方法总结
本文为思路提示篇,因此未详细述说代码,主要总结思路。
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