HTML+CSS 五种居中方式

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

方法一：利用定位

    .par {
        width: 500px;
        height: 500px;
        background-color: rgb(241, 112, 60);
        position: relative;
    }
    .son {
        width: 100px;
        height: 100px;
        background-color: rgb(49, 218, 71);
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -50px;
        margin-left: -50px;
    }

方法二：利用 transform

    .par {
        width: 500px;
        height: 500px;
        background-color: rgb(241, 112, 60);
        position: relative;
    }
    .son {
        width: 100px;
        height: 100px;
        background-color: rgb(49, 218, 71);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }

方法三：利用 margin:auto;

    .par {
        width: 500px;
        height: 500px;
        background-color: rgb(241, 112, 60);
        position: relative;
    }

    .son {
        width: 100px;
        height: 100px;
        background-color: rgb(49, 218, 71);
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
    }

方法四:利用 display:table-cell

    .par {
        width: 500px;
        height: 500px;
        background-color: rgb(241, 112, 60);
        display: table-cell;
        text-align: center;
        vertical-align: middle;

    }
    .son {
        width: 100px;
        height: 100px;
        background-color: rgb(49, 218, 71);
        display: inline-block;
    }

方法五：利用 display：flex;设置垂直水平都居中

    .par {
        width: 500px;
        height: 500px;
        background-color: rgb(241, 112, 60);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .son {
        width: 100px;
        height: 100px;
        background-color: rgb(49, 218, 71);
    }