flex布局
.div-father {
display: flex;
justify-content: center;
.div-son {
align-self: center;
}
}
position方法
.div-father {
position: relative;
.div-son {
position: absolute;
margin:auto;
top: 0;left:0;bottom:0;right:0;
}
}
table布局
.div-father {
display: table-cell;
vertical-align: middle;
text-align: center;
.div-son {
display: inline-block;
}
}
transform方法
.div-father {
position: relative;
.div-son {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); // 可能有兼容问题
}
}