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

【问题标题】：How to position the div popup dialog to the center of browser screen?如何将 div 弹出对话框定位到浏览器屏幕的中心？
【发布时间】：2012-02-04 13:40:43
【问题描述】：

我需要将 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>

谢谢！！

【问题讨论】：

如果div 具有可变高度（看起来确实如此），这对于 JavaScript 来说是非常困难的。你会考虑 JS 解决方案吗？
如果弹出窗口的位置是“固定的”，弹出窗口只会随着页面向下滚动。我们也可以看看你的 jQuery 代码吗？
@Fleep：我没有定义 Jquery 代码来定位弹出窗口。该代码仅显示 div 弹出窗口。 $('.holder').fadeIn('fast');
James Hill：如果我固定 div 的高度，是否可以使用 CSS？
my answer here for centering images 怎么样？只需将image.absoluteCenter 替换为div.absoluteCenter 并将<div class="holder"> 更改为<div class="holder absoluteCenter">。从image.absoluteCenter 中删除max-height:100%; 也可能很有用，并且可能将宽度更改为90% 或两侧留有一点空间的东西。

标签： css html position positioning

【解决方案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%);
}

【讨论】：

这是最好的解决方案

【解决方案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>

【讨论】：

我在将弹出窗口定位在小屏幕时遇到了问题。我不得不将我的 div 弹出窗口放在中心位置上方，因为我从 API 调用生成了另一个弹出窗口，它位于中间（我将弹出窗口一个放在另一个上）。当我将 div 弹出窗口的位置调整到中间上方时，除了小屏幕之外，它几乎在所有屏幕上看起来都不错。弹出窗口的顶部正在切割。如何在小屏幕中显示完整的弹出窗口？这是我现在的代码...jsfiddle.net/dSUZM/1
.popup 的 'margin-top' 属性需要调整，它必须是该 div 高度的一半的负数。我已将其更改为-260px（520 像素的一半），它在我的屏幕上看起来不错？ jsfiddle.net/dSUZM/2 希望这行得通！
@Jassi jsfiddle 示例没有用，请使用相关的工作演示。

【解决方案3】：

您可以使用 CSS3 'transform'：

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;

【讨论】：

这应该是公认的答案。这是将 any 大小的弹出窗口居中的正确方法。不过，您不需要margin: 0px auto;，而是使用0 而不是0px。
这应该是公认的答案。

【解决方案4】：

我在 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>

【讨论】：

感谢您的回复。它仅适用于 Firefox 和 chrome。在 IE 中不起作用。
对不起，我编辑了代码。您必须在顶部添加此文档类型

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

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

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

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

【讨论】：

【解决方案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 */
}

【讨论】：

【解决方案8】：

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

【讨论】：

丹弗斯：感谢您的回复。我试着按照你说的添加位置，它仍然没有定位在中心。我需要为此设置任何左边距和上边距吗？我没有为弹出窗口定义高度。
看到这个fiddle是你正在寻找的影响吗？
danferth：它被定位为中心（当考虑浏览器页面宽度时），但我怎样才能让它以页面为中心（考虑浏览器屏幕宽度和高度）我的意思是我需要降低弹出窗口的位置，使其看起来正好在浏览器页面的中心
没有意识到你需要它垂直居中也认为你想要它距离顶部 30px。我的错。看起来@Jassi 为你解决了。

【解决方案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;
}

【讨论】：