Question

我需要将div弹出窗口置于浏览器屏幕的中心（无论屏幕的大小是多少）。我希望保持这个绝对的位置，因为当我向下滚动页面时我不想将弹出窗口移动。

使用Jquery单击按钮时会显示此div。

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

这是我的代码

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>

谢谢！

Answer 1

.popup-content-box{
    position:fixed;
    left: 50%;
    top: 50%;
    -ms-transform: translate(-50%,-50%);
    -moz-transform:translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
     transform: translate(-50%,-50%);
}

Answer 2

在这里，这个工作。：）

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

upd：以防jsfiddle没有响应，这里是代码...
的 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：

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

Answer 3

我在jquery中编写代码。这并不容易。但我希望它对你有用。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">

.popup{
    border: 4px solid #6b6a63;
    width: 800px;
    border-radius :7px;
    margin : auto;
    padding : 20px;
    position:fixed;
}

</style>

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

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function(){
    var popup_height = document.getElementById('popup').offsetHeight;
    var popup_width = document.getElementById('popup').offsetWidth;
    $(".popup").css('top',(($(window).height()-popup_height)/2));
    $(".popup").css('left',(($(window).width()-popup_width)/2));
});
</script>

Answer 4

您可以使用CSS3＆＃39;转换＆＃39;：

CSS：

.popup-bck{
  background-color: rgba(102, 102, 102, .5);
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 10;
}
.popup-content-box{
  background-color: white;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 11;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

HTML：

<div class="popup-bck"></div>
<div class="popup-content-box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
</div>

*所以您不必使用margin-left: -width/2 px;

Answer 5

注意：这不能直接回答您的问题。这是故意的。

A List Apart有一篇很棒的CSS Positioning 101文章值得一读......不止一次。它有许多例子，其中包括你的具体问题。我强烈推荐它。

Answer 6

这是一个经典问题，当您滚动屏幕上生成的模态弹出窗口时，它会停留在该位置并且不会滚动，因此用户可能会被阻止，因为他可能看不到可见屏幕上的弹出窗口。

以下链接还提供了仅用于生成模态框及其绝对位置的CSS代码。

http://settledcuriosity.wordpress.com/2014/10/03/centering-a-popup-box-absolutely-at-the-center-of-screen/

Answer 7

找到正确的组合花了一段时间，但这似乎是水平和垂直的叠加或弹出内容的中心，没有事先知道内容高度：

HTML：

<div class="overlayShadow">
    <div class="overlayBand">
        <div class="overlayBox">
            Your content
        </div>
    </div>
</div>

CSS：

.overlayShadow {
    display: table;
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    z-index: 20;
}

.overlayBand {
    display: table-cell;
    vertical-align: middle;
}

.overlayBox {
    display: table;
    margin: 0 auto 0 auto;
    width: 600px; /* or whatever */
    background-color: white; /* or whatever */
}

Answer 8

我认为您需要制作.holder position:relative;和.popup position:absolute;

Answer 9

我们不需要知道对话框的宽度/高度然后假设边距的一种解决方案。

HTML：

<div id="dialog-contain">  <-- This div because I assume you might have a display that is not a flex. '
    <div id="block">
        <div id="centered">
            stuffs
        </div>
    </div>
</div>

的CSS：

#dialog-contain { // full page container.
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    ...
}

#block {  // another container simply with display:flex.
    display: flex;
    height: 100%;
    width: 100%;
    justify-content: center;
}

#centered {   // another container that is always centered.
    align-self: center;
}

如何将div弹出对话框定位到浏览器屏幕的中心？

9 个答案: