1、flex布局
flex-direction是啥方向,主轴就是啥方向。align-items是让子元素贴在主轴上的,justify-content是让子元素贴在副轴上的。
.father{
height: xx px;
display: flex;
flex-direction: row|column; /* 主轴方向 */
align-items: center; /* 主轴居中 */
justify-content: center; /* 副轴居中 */
}
2、table-cell布局
.father{
height: xx px;
display: table-cell;
vertical-align: middle; /* 垂直居中 */
text-align: center; /* 类似文本的水平居中 */
}
.child{
display: inline-block;
}
3、绝对定位(transform方法)
.child{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 向左、向上偏移自身宽、高的一半 */
}
4、绝对定位(margin 负值)
.child{
position: absolute;
top: 50%;
left: 50%;
margin-top: -自身高度/2px;
margin-left: -自身宽度/2px;
}
5、绝对定位(calc 计算)
.child{
position: absolute;
top: calc((100% - 自身高度px)/2);
left: calc((100% - 自身宽度px)/2);
}
6、绝对定位(margin:auto)
.child{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}