页面中垂直居中的几种方法：
1. 通过使用absolute定位来实现垂直居中
在需要垂直居中的元素的长宽已知的情况下可以使用此方法。
HTML:
CSS：
.bg{
position: relative;
background: #dfdfdf;
width: 400px;
height: 400px;
}
.center-div{
width: 100px;
height: 100px;
background: red;
position: absolute;
top: 50%;
left: 50%;
margin-left:-50px;
margin-top:-50px;
}
需要垂直居中的元素的长宽设定为已知的 100px。
在父级元素设定position：relative属性，在需要垂直居中的元素设置position:absolute属性，设置top：50% ，left：50%；根据父级元素来做垂直元素的右上角定位，其位置与父级元素中心点重合，然后用margin属性带负值来移动使居中元素的中心点与父级中心点重合，实现居中。
2. 使用table实现居中
td单元格内内容会默认继承vertical-align垂直居中显示.
这里写图片描述
当然，如果觉得用table觉得语义化不好，也可以用div来实现相同效果，只需要添加 display：table 属性：
3. 使用display:flex实现居中
给父级添加display：flex属性，然后给居中元素添加margin：auto，就可以实现水平和垂直居中。不过可能部分浏览器不支持。
