- 自身相对父元素:偏移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;
我认为以上是最常用的方法,适用性比较广。设置垂直居中的方法很多提供一个总结的不错的文章(传送门)