元素居中的几种方法

1. flexbox

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

.container {
    width: 300px;
    height: 300px;
    border: 1px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
}
.div1 {
    width: 100px;
    height: 100px;
    background: #039748;
}

2. 绝对定位 + transform

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

.container {
    width: 300px;
    height: 300px;
    border: 1px solid black;
    position: relative;
}
.div1 {
    width: 100px;
    height: 100px;
    background: #039748;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}