比较推荐的办法:
1.display:flex。
如果想正常纵向排列,加上flex-direction:column;
.parent{
display:flex;
justify-content:center;
align-items:center;
}
2.定位+transform
定位中心点是盒子的左上顶点,所以定位之后我们需要回退盒子一半的距离。
.parent{
position:relative;
}
.child{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
3.定位+margin:auto
.parent{
position:relative;
}
.child{
position:absolute;
margin:auto;
top:0;
left:0;
right:0;
bottom:0;
}