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

Question

I have a div with class .popup . I have an iFrame used to open another image gallery, but when I show the popup using jQuery it isn't centered and the top most page element.

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>

How do I fix this problem and where is my lost code?

Answer 1

$(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"});   
});

This will move the div in center.

Answer 2

I'm not sure what you're looking for with width: inherit . This will always make your popup as wide as its parent element, so there's no need for centering. With position: absolute , however, your popup will be positioned according to either the body element of your page, or a parent element with position: relative .

Here's what I'd do if I understand your problem correctly:

I'm assuming width is unknown here.

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

Here's a fiddle: http://jsfiddle.net/ugys4znt/

If you want the popup to stay on screen even when the user scrolls, use position: fixed .

Please specify some more what you're trying to achieve with width: inherit , and I'll get back to you.