如何把div显示在页面中间

如何把div显示在页面中间，下面我们过来看看这两个样式就行了

成品是这样子

下面是对应的代码

css是

.centered-main {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 99;
}
.centered-div {
    width: 25%;
    height: auto;
    padding: 1rem .6rem 1rem;
    background-color: #fff;
    border-radius: .5rem;
    z-index: 100;
    position: relative;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: top center;
    text-align: center;
    font-size: 14px;
}
.centered-div img{width: 90%;text-align: center}

html是