css实现弹出的div显示在屏幕中间

主要代码如下：

.info{
        width: 90vw;
        height: 102vw;
        display: block;
        position: fixed;
        z-index: 999;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 14px;
}
.info-header{
    text-align: center;
}

<!-- 提交提示 -->
<div id="info" >
    <div class="info-header">
        <img style="width: 100%" src="vote2024_info.png?v=2.0"  alt="">
    </div>
    
    <div style="margin-top: 2vh;text-align: center;">
        <a >
            <img style="width: 15vw;" src="vote2024_close.png?v=2.0"  alt="">
        </a>
    </div>

</div>

这里是一个长页，弹窗要显示在屏幕中间，所以要使用fixed，实现效果如下：