1.margin:0 auto法
//父元素
.container {
position:relative;
......
}
//子元素
.container_item {
position:absolute;
left:0;
top:0;
bottom:0;
right:0;
margin:0 auto;
......
}
2.margin:auto法
//父元素
.container {
position:relative;
......
}
//子元素
.container_item {
position:absolute;
left:0;
right:0;
margin:auto;
......
}
3.弹性盒子法
//父元素
.container {
display:flex;
align-items:center;
justify-content:center;
......
}
//子元素
.container_item {
display:inline-block;
......
}
4.绝对定位法
//父元素
.container {
position:relative;
......
}
//子元素
.container_item {
position:absolute;
left:50%;
top:50%;
margin-left:-(width / 2)
margin-top:-(height / 2)
......
}
5.table-cell法
//父元素
.container {
display:table-cell;
text-align:center;
vertical-align:middle;
......
}
//子元素
.container_item {
display:inline-block;
......
}
6.绝对定位+css变换
//父元素
.container {
position:relative;
......
}
//子元素
.container_item {
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
......
}