# 实现水平垂直水平居中
# 垂直水平居中
# 推荐方案：flex
<div class="container">
<div class="item">垂直水平居中</div>
</div>
1
2
3
2
3
.container {
display: flex;
justity-content: center;
align-items: center;
}
1
2
3
4
5
2
3
4
5
# 绝对定位 + translate方案
# 无视宽度水平居中
<div class="item">无视宽度水平居中</div>
1
.item {
margin: 10px auto;
}
1
2
3
2
3
原理： 该缩写等价于
.item {
margin-top: 10px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
}
1
2
3
4
5
6
2
3
4
5
6