css 居中

居中有水平居中和垂直居中。

水平居中+垂直居中 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>

参考

CSS各种居中方法 - lines - 博客园