居中有水平居中和垂直居中。
水平居中+垂直居中 flex法
<style>
.outer {
width:200px;
height:200px;
border:1px solid green;
display:flex;
justify-content: center;
align-items: center;
}
.inner {
width:100px;
height:100px;
border:1px solid green;
}
</style>
<div class='outer'>
<div class='inner'>
</div>
</div>
position法
就是计算呗~
<style>
.outer {
width:200px;
height:200px;
border:1px solid green;
position: relative;
}
.inner {
width:100px;
height:100px;
border:1px solid green;
position:absolute;
left:50px;
top:50px;
}
</style>
<div class='outer'>
<div class='inner'>
</div>
</div>
