Javascript 如何解决弹出中心屏幕Div类？

我有一个类为

的
div
。popup

。我有一个iFrame用于打开另一个图像库，但是当我使用jQuery显示弹出窗口时，它不是居中的，并且是最上面的页面元素

CSS

.popup {
    border: 1px solid #ccc;
    width:inherit;
    border-radius: 7px;
    margin-right: auto;
    margin-left:auto;
    padding: 20px;
    position:absolute;
    z-index: 1000;
    background-color: #f0f0f0;
    height:400px;  
}

HTML

<div class="popup " style="display: none">
    <div class="col-lg-12" style="padding-bottom: 10px;">
        <input onclick='SelectImage(inputImage)' class="btn btn-xs btn-success pull-left" type="button" value=" بازگشت " />
        <input id="btnImageSelect" onclick='SelectImage(inputImage)' class="btn btn-xs btn-success" type="button" value="تایید عکس" />
    </div>
    <iframe id="iframeImage" src="../filemanager/ImagePicker.aspx" width="100%" height="320" frameborder="1"></iframe>
</div>

如何修复此问题以及丢失的代码在哪里

$(document).ready(function(){
  var width  = $(.popup).width();
  var height  = $(.popup).height();
  $(".popup").css({"top":"50%", "left":"50%", "margin-top":height/2+"px", margin-left:width/2+"px"});   
});

---

这将移动中间的

div

。

我不确定您要用

宽度：inherit

查找什么。这将始终使弹出窗口与其父元素一样宽，因此不需要居中。但是，如果使用

位置：绝对

，则弹出窗口将根据页面的

主体

元素或带有

位置：相对

的父元素进行定位

如果我正确理解您的问题，我会做以下几点：

我假设

宽度在这里是未知的

.popup {
    ...
    position: absolute;
    margin: 0;
    left: 50%;
    transform: translateX(-50%);
}

这是一把小提琴：

如果您希望弹出窗口即使在用户滚动时也保持在屏幕上，请使用
position:fixed

请详细说明使用
width:inherit
尝试实现的目标，我会给您回复