如何使弹出位置相对于整个页面而不是触发它的按钮

Question

我正在尝试编写一个在单击图像时触发的弹出窗口，它基本上可以工作，但弹出窗口正在与触发它的图像对齐。我需要将它与整个页面的中心对齐，我尝试弄乱边距并将所有 div 类设置为 align="center" 但这些都没有帮助。这是一个 Elementor 小部件，我认为它基本上只是一个 CSS flexbox。

<div class="popup">
  <img src="image1.png">
</div>
<div class="showcompliant">
  <div class="overlay"></div>
  <div class="img-showcompliant" align="center">
    <div align="right"><span>X</span></div>
      <div class="icon">
  </div>
  <div class="description">
 Lorem ipsum dolor amet sit. 
  </div>
  <div class="illustrationcomplaints"></div>
  <style>
   .illustrationcomplaints {
  background-image: url("image2.png");
  background-repeat: no-repeat;
width:600px;
height: 100px;
}   
  </style>
  <div align="center">
  <div class="dismiss-btn">
 
  </div>
 </div>
 </div>
</div>

<style>
 .popup{
    margin: auto;
    text-align: center

}

.popup:hover {

    position: relative;
    top: -5px;  
}

.popup img{
    width: 390px;
    height: 140px;
    cursor: pointer
    z-index: 75;
}
.showcompliant{
    display: none;
    z-index: 101;
    align-self: center;
    margin-left: 50%;
    margin-right: 50%;
}

.showcompliant .img-showcompliant{
    width:650px;
    height:350px;
    align-content: center;
    background: #F2F2F2;
    padding: 20px;
    position: relative;
    z-index: 100;
}
.img-showcompliant span{
    position: absolute;
    cursor: pointer;
}
.img-showcompliant img{

    top: 0;
    left: 0;
}   

.description {
    padding:25px;
    color: #1a1a1a;
}

.overlay {
    align-content: center;
}
</style>
<script>
$(function () {
    "use strict";
    
    $(".popup img").click(function () {
        var $src = $(this).attr("src");
        $(".showcompliant").fadeIn();
        $(".img-showcompliant img").attr("src", $src);
    });
    
    $("span, .overlay").click(function () {
        $(".showcompliant").fadeOut();
    });
    
});
</script>

Answer 1

美好的一天。尝试帮助您...
据我了解，您需要使用 flexbox 并使用“flex-direction: column;”
请看这个非常简单的 html + css 如何使用它。
如果对您有帮助，请告诉我？

html,body{
  height:100%;
  padding:0;
  margin:0;
}
*{
  box-sizing:border-box;
}
.box{
  width:100px;
  height:100px;
  background-color:blue;
}

.container{
  
  width:100%;
  height:100%;
  background-color:#ccc;
  flex-direction:column;
  display:flex;
  justify-content:center;
  align-items:center;
  
}

<div class="container">
  <div class="box"></div>
 <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png">
</div>