水平居中
margin: 0 auto;
元素的水平垂直居中
1.定位
position: absolute
left: 50%
top: 50%
margin: -x 0 0 -y
x是元素高度一半
y是元素宽度一半
2.用translate设置宽、高
position: absolute
left: 50%
top: 50%
transform: translate(-50%,-50%)
3.flex
display: flex;
justify-content: center;
align-items: center;
4.table-cell
.box {
background-color: #FF8cff;
width: 300px;
height: 300px;
display: table;
}
.content {
background-color: #0ff;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.inner {
background-color: #000;
display: inline-block;
width: 20%;
height: 20%;
}
