如何将div弹出对话框定位到浏览器屏幕的中心？ [英] How to position the div popup dialog to the center of browser screen?

问题描述

我需要将div弹出式窗口定位到浏览器屏幕的中心（无论屏幕是什么大小）。

I need to position div popup to the center of browser screen ( no matter what size the screen is). And I want to keep the position as absolute as I don't want to move the popup down when I scroll down the page.

当按钮被点击时，显示此div。当我向下滚动页面时，我想保持绝对位置。使用Jquery。

This div is displayed when button is clicked using Jquery.

我尝试将margin-left设置为其他帖子中提到的一半宽度，但不适用于我。

I tried setting margin-left to half of the width like mentioned in other posts but It isn't working for me.

这是我的代码

CSS代码：

.holder{        
    width:100%;
    position:absolute;
    left:0;
    top:0px;
    display:block;  
}
.popup{
    width:800px;
    margin:0 auto;
    border-radius: 7px;
    background:#6b6a63;
    margin:30px auto 0;
    padding:6px;
}

.content{
    background:#fff;
    padding: 28px 26px 33px 25px;
}

HTML代码：

  <div class="holder">
        <div id="popup" class="popup">            
            <div class="content">
                        some lengthy text
                     </div>
        </div>
   </div>

谢谢!!

推荐答案

在这里，这些工作。 ：）

Here, this ones working. :)

http://jsfiddle.net/nDNXc/1/

upd：只有在jsfiddle没有响应的情况下才是代码...

CSS：

upd: Just in case jsfiddle is not responding here is the code...
CSS:

.holder{        
    width:100%;
    display:block;
}
.content{
    background:#fff;
    padding: 28px 26px 33px 25px;
}
.popup{
    border-radius: 7px;
    background:#6b6a63;
    margin:30px auto 0;
    padding:6px;  
    // here it comes
    position:absolute;
    width:800px;
    top: 50%;
    left: 50%;
    margin-left: -400px; // 1/2 width
    margin-top: -40px; // 1/2 height
}

HTML： / p>

HTML:

<div class="holder">     
    <div id="popup" class="popup">            
        <div class="content">some lengthy text</div>
    </div>
</div>

这篇关于如何将div弹出对话框定位到浏览器屏幕的中心？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！