方法1:table-cell
html结构:
水平垂直居中
css代码:
.box1{
display: table-cell;
vertical-align: middle;
text-align: center;
}
方法2:display:flex
html结构:
css代码:
.box2{
display: flex;
justify-content:center;
align-items:center;
}
方法3:绝对定位和0
.box3{position:relative}
.box3 div{
position:absolute;
top:0; left:0; right:0;bottom:0;
margin:auto;
}
方法4:绝对定位和负边距
.box4{position:relative}
.box4 div{
width:100px;
height:50px;
position:absolute;
top:50%;
left:50%;
margin:-25px 0 0 -50px;
text-align:center;
}
方法5:绝对定位和translate
.box5{position:relative}
.box5 div{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
text-align:center;
}
方法6:display:flex和margin:auto
.box6{ display: flex; text-align: center; }
.box6 div{ margin: auto; }