关于css中垂直居中的总结

第一种方法： 给父级元素一个: display : table-cell; vertical-align : middle;就能让子级元素垂直居中，因为display:table-cell属性能让标签元素以表格单元格的形式呈现，类似于td标签，类似于让div像table中的td元素处于一个中间的位置。但也有其局限性，IE8+才能使用这个方法，IE6，IE7不能识别这种方法。

第二种方法: 同样的给父级元素一个：display: flex;align-items: center;justify-content: center;能让子级元素垂直居中，首先display：flex;为弹式布局，用来为盒状模型提供最大的灵活性;align-items: center;弹性盒子元素在该行的侧轴（纵轴）上居中放置;justify-content: center;弹性盒子元素将向行中间位置对齐,因为本方法中用的全是css3中的属性，所以IE10+以上才能使用。

第三种方法： 先设置水平居中,再设置垂直居中。即 ：margin : 0 auto;line-height:盒子的高度。

第四中方法：父级给一个position:relative;　　子级div给一个：position: absolute;top: 50%;left: 50%;margin: -15% 0 0 -25%;height: 30%;width: 50%;

第五种方法：父级给一个position:relative;　　子级div给一个：

position: absolute;　　top: 0;bottom: 0;　　left: 0;　　right: 0;　　width: 50%;　　height: 30%;　　margin: auto;