页面中垂直居中的几种实现方法

页面中垂直居中的几种方法：

1. 通过使用absolute定位来实现垂直居中

在需要垂直居中的元素的长宽已知的情况下可以使用此方法。

HTML:

CSS：

需要垂直居中的元素的长宽设定为已知的 100px。
在父级元素设定position：relative属性，在需要垂直居中的元素设置position:absolute属性，设置top：50% ，left：50%；根据父级元素来做垂直元素的右上角定位，其位置与父级元素中心点重合，然后用margin属性带负值来移动使居中元素的中心点与父级中心点重合，实现居中。

![这里写图片描述](http://upload-images.jianshu.io/upload_images/1396745-3bb6d99aad8d3123?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 

2. 使用table实现居中

td单元格内内容会默认继承vertical-align垂直居中显示.

这里写图片描述

当然，如果觉得用table觉得语义化不好，也可以用div来实现相同效果，只需要添加 display：table 属性：

3. 使用display:flex实现居中

给父级添加display：flex属性，然后给居中元素添加margin：auto，就可以实现水平和垂直居中。不过可能部分浏览器不支持。