css 上下左右居中5种方法

不定位2种

	<div class="div1">
        <div class="div2"></div>
    </div>

    .div1 {
        height: 400px;
        width: 400px;
        background: linear-gradient(90deg, rgb(51, 112, 255) 0%, rgba(255, 255, 255) 100%);
        display: table-cell;
        vertical-align: middle;
    }
    .div2 {
        height: 100px;
        width: 100px;
        background: chocolate;
        margin: 0 auto;
    }

	<div class="div3">
        <div class="div4"></div>
    </div>

    .div3 {
        height: 400px;
        width: 400px;
        background: linear-gradient(90deg, rgb(51, 112, 255) 0%, rgba(255, 255, 255) 100%);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .div4 {
        height: 100px;
        width: 100px;`在这里插入代码片`
        background: chocolate;
    }

position 定位3种

	<div class="div5">
        <div class="div6"></div>
    </div>

    .div5 {
        height: 400px;
        width: 400px;
        background: linear-gradient(90deg, rgb(51, 112, 255) 0%, rgba(255, 255, 255) 100%);
        position: relative;
    }
    .div6 {
        height: 100px;
        width: 100px;
        background: chocolate;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

	<div class="div7">
        <div class="div8"></div>
    </div>

    .div7 {
        height: 400px;
        width: 400px;
        background: linear-gradient(90deg, rgb(51, 112, 255) 0%, rgba(255, 255, 255) 100%);
        position: relative;
    }
    .div8 {
        height: 100px;
        width: 100px;
        background: chocolate;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin:auto;
    }

	<div class="div9">
        <div class="div10"></div>
    </div>

.div9 {
        height: 400px;
        width: 400px;
        background: linear-gradient(90deg, rgb(51, 112, 255) 0%, rgba(255, 255, 255) 100%);
        position: relative;
    }
    .div10 {
        height: 100px;
        width: 100px;
        background: chocolate;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -50px;
        margin-top: -50px;
    }