實現已知或者未知寬度的垂直水平居中
阿新 • • 發佈：2018-11-21
pos relative table flex mar ddl ans -a absolut
.wraper {
position: relative;
.box {
position: absolute;
top: 50 %;
left: 50 %;
width: 100px;
height: 100px;
margin: -50px 0 0 - 50px;
}
}
// 2
.wraper {
position: relative;
.box {
position: absolute;
top: 50 %;
left: 50 %;
transform: translate(-50 %, -50 %);
}
}
// 3
.wraper {
.box {
display: flex;
justify-content: center;
align-items: center;
height: 100px;
}
}
// 4
.wraper {
display: table;
.box {
display: table-cell;
vertical-align: middle;
}
}
實現已知或者未知寬度的垂直水平居中