css垂直水平居中

• 自身相对父元素：偏移50% － width／2

//width为定值
position: relative; 
top: 50%; /*偏移*/
margin:auto;//水平居中
margin-top: -150px; //假设width＝300px

//如果width不确定
position: relative; 
margin:auto;//水平居中
top: 50%; /*偏移*/
transform: translateY(-50%);

• flex设置父元素

display: flex;
align-items: center; /*定义父元素里的子元素垂直居中*/
justify-content: center; /*定义父元素里的元素水平居中*/

• 父元素设置为table-cell

display: table-cell;
vertical-align: middle;
text-align: center; 

我认为以上是最常用的方法，适用性比较广。设置垂直居中的方法很多提供一个总结的不错的文章（传送门）