（一）不知寬高
1、table
.c1{
width: 500px;
height: 300px;
display: table;
}
.c2{
display: table-cell;
vertical-align: middle;
text-align: center;
}
（二）定寬高
1掉弛、absolute + top + left + margin
.c1{
width: 500px;
height: 300px;
position: relative;
}
.c2{
position: absolute;
width: 200px;
height: 100px;
top: 50%;
left: 50%;
margin: -50px 0 0 -100px;
}
2症见、absolute + top + right + left + bottom + margin: auto
.c2 {
position: absolute;
width: 200px;
height: 200px;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
（三）定或不定寬高
1、flex
.c1{
display: flex;
align-items: center;
justify-content: center;
}
2殃饿、absolute + top + left + trasform(translate)
.c1{
width: 500px;
height: 300px;
position: relative;
}
.c2{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
