定义垂直居中五种方法

单行文字垂直居中：line-height等于height；

块级元素垂直居中：position定位，flex布局，display:table结合table-cell等等。

1.父元素高度确定的单行文本（一）

通过设置父元素的 height 和 line-height 高度一致来实现

1

2

2.父元素高度确定的单行文本（二）

通过把一些div的display 为 table-cell（设置为表格单元显示），然后再激活 vertical-align  属性。

注： IE6、7 并不支持这个样式, 兼容性比较差。

3.垂直居中

绝对定位这个 div，把它的 top 设置为 50％，再把margin-top 设置为负的 div 高度的一半！

4.display:flex

div{

display: flex; 

justify-content:center; 

align-items:Center;

}

5.绝对定位和 top left bottom right都为0

div{ width: 50%; 

  height: 50%; 

  background:#000;

  overflow: auto; 

  margin: auto; 

  position: absolute; 

  top: 0; left: 0; bottom: 0; right: 0;}