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

Question

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

csshtmlpositionpositioning

7

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

Thanks!!

- S K

1

如果div具有可变高度（看起来是这样），那么使用JavaScript会非常困难。您是否考虑过JS解决方案？ - James Hill

2

弹出窗口只有在其位置为“fixed”时才会随页面向下滚动。我们能看到你的jQuery代码吗？ - Fleep

@Fleep: 我没有定义Jquery代码来定位弹出窗口。这段代码只是显示div弹出窗口。$('.holder').fadeIn('fast'); - S K

詹姆斯·希尔：如果我固定 div 的高度，是否可以使用 CSS 实现？ - S K

怎么样尝试使用我的答案（链接）来实现图像垂直居中？只需用div.absoluteCenter替换image.absoluteCenter，并将<div class="holder">改为<div class="holder absoluteCenter">。也许删除image.absoluteCenter中的max-height:100%;，可能将宽度更改为90％或留有一些空间。 - 0b10011

@SK 一个小建议。永远不要给id和class分配相同的名称，即在这种情况下是popup。 - timekeeper

9个回答

21

这个可以用了，:)

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

更新: 以防 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>

- Klikster

我在小屏幕上如何定位弹出窗口遇到了问题。我必须将我的 div 弹出窗口放置在中心位置的正上方，因为我还生成了一个来自 API 调用的弹出窗口，它位于中央位置（我将弹出窗口叠放在一起）。当我将我的 div 弹出窗口的位置调整到中间上方时，在几乎所有屏幕上看起来都很好，除了小屏幕。弹出窗口的顶部部分被剪切了。如何在小屏幕上显示完整的弹出窗口？这是我现在的代码... http://jsfiddle.net/dSUZM/1/ - S K

.popup的margin-top属性需要调整，它必须是该div高度的负一半。我已经将其更改为-260px（520px的一半），在我的屏幕上看起来不错。http://jsfiddle.net/dSUZM/2/希望这样可以解决问题！ - Klikster

@Jassi jsfiddle 的例子不太有用，请使用相关的可工作演示。 - Preshan Pradeepa

6

你可以使用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;

- Alexander Ivashchenko

2

这应该是被接受的答案。这是居中弹出窗口的正确方法，适用于任何大小。你不需要使用margin: 0px auto;，而是使用0代替0px。 - Jose Rui Santos

这应该是被接受的答案。 - Sobhani

5

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

- FURKAN ILGIN

谢谢回复。它只在Firefox和Chrome中工作，不在IE中工作。 - S K

抱歉，我编辑了代码。你必须在顶部添加这个文档类型。 - FURKAN ILGIN

2

这是一个经典问题，当你滚动屏幕时，弹出的模态框会停留在原地不随着页面一起滚动，因此用户可能会被阻塞，因为他在可见屏幕上看不到弹出框。

以下链接提供了仅使用CSS代码来生成一个带有绝对位置的模态框。

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

- Abhishek Jain

2

注意：这并不直接回答你的问题。这是有意为之的。 A List Apart有一篇非常好的CSS定位101文章，值得阅读……不止一次。它包含了许多例子，其中包括你的特定问题。我强烈推荐它。

- Peter Rowell

1

找到正确的组合花了一些时间，但是这似乎可以将叠加或弹出内容在水平和垂直方向上居中，而无需先知道内容的高度：

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 */
}

- Giorgio Barchiesi

0

我认为你需要将 .holder 的 position 设为 relative，并将 .popup 的 position 设为 absolute

- Danferth

谢谢回复。我按照您说的添加了位置，但它仍未居中。我需要为此设置任何margin-left 和 top吗？弹出窗口的高度未定义。 - S K

看看这个fiddle，这是你想要的效果吗？ - Danferth

danferth：当考虑浏览器页面宽度时，它被定位为中心，但是我该如何确保它在浏览器屏幕的宽度和高度上居中呢？我的意思是，我需要降低弹出窗口的位置，以便它看起来恰好位于浏览器页面的中心。 - S K

没意识到你还需要垂直居中，而且我还以为你想让它距离顶部30像素。我的错。看起来@Jassi已经为你解决了这个问题。 - Danferth

0

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

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;
}

- rjbaj

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nikhil Mathew · Accepted Answer

.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%);
}