如何将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弹出窗口置于浏览器屏幕的中心（无论屏幕的大小是多少）。而且我希望保持这个位置是绝对的，因为当我向下滚动页面时我不想将弹出窗口向下移动。

This div is displayed when button is clicked using Jquery.

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

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

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

Here is my code

这是我的代码

CSS code:

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 Code:

HTML代码：

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

Thanks!!

谢谢！！

9 个解决方案

#1

Here, this ones working. :)

在这里，这个工作。 :)

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

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

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:

HTML：

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

#2

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

#3

I write a code in jquery. It isnt seen an easy way. But i hope it is useful for you.

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

#4

You can use CSS3 'transform':

你可以使用CSS3'transform'：

CSS:

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:

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>

*so you don't have to use margin-left: -width/2 px;

*所以你不必使用margin-left：-width / 2 px;

#5

Note: This does not directly answer your question. This is deliberate.

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

A List Apart has an excellent CSS Positioning 101 article that is worth reading ... more than once. It has numerous examples that include, amongst others, your specific problem. I highly recommend it.

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

#6

Its a classical problem, when you scroll the modal popup generated on the screen stays at it place and does not scroll along, so the user might be blocked as he might not see the popup on his viewable screen.

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

The following link also provides CSS only code for generating a modal box along with its absolute position.

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

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

#7

It took a while to find the right combination, but this seems to center the overlay or popup content, both horizontally and vertically, without prior knowledge of the content height:

找到合适的组合需要一段时间，但这似乎是水平和垂直的叠加或弹出内容的中心，而不需要事先了解内容高度：

HTML:

HTML：

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

CSS:

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

I think you need to make the .holder position:relative; and .popup position:absolute;

我认为你需要做出.holder的立场：亲戚;和.popup位置：绝对;

#9

One solution where we need not know the width/height of the dialog and then assume the margins.

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

Html:

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:

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

#1

Here, this ones working. :)

在这里，这个工作。 :)

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

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

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:

HTML：

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

#2

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

#3

I write a code in jquery. It isnt seen an easy way. But i hope it is useful for you.

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

#4

You can use CSS3 'transform':

你可以使用CSS3'transform'：

CSS:

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:

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>

*so you don't have to use margin-left: -width/2 px;

*所以你不必使用margin-left：-width / 2 px;

#5

Note: This does not directly answer your question. This is deliberate.

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

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

#6

The following link also provides CSS only code for generating a modal box along with its absolute position.

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

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

#7

It took a while to find the right combination, but this seems to center the overlay or popup content, both horizontally and vertically, without prior knowledge of the content height:

找到合适的组合需要一段时间，但这似乎是水平和垂直的叠加或弹出内容的中心，而不需要事先了解内容高度：

HTML:

HTML：

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

CSS:

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

I think you need to make the .holder position:relative; and .popup position:absolute;

我认为你需要做出.holder的立场：亲戚;和.popup位置：绝对;

#9

One solution where we need not know the width/height of the dialog and then assume the margins.

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

Html:

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:

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

#1

#2

#3

#4

#5

#6

#7

#8

#9

#1

#2

#3

#4

#5

#6

#7

#8

#9

相关文章