CSS水平垂直居中

1.利用定位 + margin:auto

2.flex布局

3.grid布局

一、利用position+margin:auto

<style>

  .outer {
        position: relative;  /*父亲相对定位*/
        width: 200px;
        height: 200px;
        background-color: red;
    }
    .inner {
        position: absolute;   /*儿子绝对定位*/
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin:auto;   /*上下左右外边距为auto*/
        width: 100px;
        height: 100px;
        background-color: yellow;
    }

</style>


<div class="outer">
       <div class="inner"></div>
</div>

 二、利用flex

<style>

    .outer {
        display: flex;    /*弹性布局*/
        justify-content: center;  /*水平居中*/
        align-items: center;  /*垂直居中*/

        width: 200px;
        height: 200px;
        background-color: red;
    }
    .inner {
        width: 100px;
        height: 100px;
        background-color: yellow;
    }

</style>


<div class="outer">
     <div class="inner"></div>
</div>

三、gird布局

<style>
    .father {
            display: grid;
            align-items:center;
            justify-content: center;
            width: 200px;
            height: 200px;
            background: skyblue;

        }
        .son {
            width: 10px;
            height: 10px;
            border: 1px solid red
        }
</style>

<div class="father">
    <div class="son"></div>
</div>