Question

我正在寻找两个小时，如何将div放在屏幕上。因此，当您向下滚动一个大页面并单击一个链接时，div＆＃34;弹出＆＃34;应出现在屏幕中央，而不是页面。

如果你采用这样的代码，它只会将div放在页面中心，所以如果没有向上滚动它就不可见：

.centerDiv {
    width: 800px;
    border-radius: 5px;
    background: #ccc;
    padding: 10px;
    height: 50px;
    position: absolute;
    margin-top: -25px;
    margin-left: -400px;
    top: 50%;
    left: 50%;
}

感谢您的帮助：）

Answer 1

而不是position: absolute尝试position: fixed

Answer 2

使用position: fixed，然后将其置于中心位置：

position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;

无论您身在何处，都会将其置于页面的中心位置。只需在需要时显示弹出窗口即可。请参阅我底部的演示，了解它的外观。

示例：

＆＃13;

body {
  height: 3000px;
}
.popup {
  width: 200px;
  height: 150px;
  border: 1px solid;
  background: red;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
}

＆＃13;

<div class="popup">I stay in the middle no matter where you scroll.</div>

＆＃13;

另一个示例显示了页面底部的点击链接：

Demo Here

注意：滚动到底部，然后点击span。

Answer 3

/*
this is javascript free .. almost.
Here i show you how to create pure CSS3 overlays
this uses the :target pseudo class
*/

*{margin:0;padding:0;}
#overlay{ /* we set all of the properties for are overlay */
    height:80%;
    width:80%;
    margin:0 auto; /* center dude */
    background:white;
    color:black;
    padding:10px;
    position:absolute;
    top:5%;
    left:10%;
    z-index:1000;
    display:none;
    /* CSS 3 */
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    -o-border-radius:10px;
    border-radius:10px;
}

#mask{ /* create are mask */
    position:fixed;
    top:0;
    left:0;
    background:rgba(0,0,0,0.6);
    z-index:500;
    width:100%;
    height:100%;
    display:none;
}
/* use :target to look for a link to the overlay then we find are mask */
#overlay:target, #overlay:target + #mask{
    display:block;
    opacity:1;
}
.close{ /* to make a nice looking pure CSS3 close button */
    display:block;
    position:absolute;
    top:-20px;
    right:-20px;
    background:red;
    color:white;
    height:40px;
    width:40px;
    line-height:40px;
    font-size:35px;
    text-decoration:none;
    text-align:center;
    font-weight:bold;
    -webkit-border-radius:40px;
    -moz-border-radius:40px;
    -o-border-radius:40px;
    border-radius:40px;
}
#open-overlay{ /* open the overlay */
    padding:10px 5px;
    background:blue;
    color:white;
    text-decoration:none;
    display:inline-block;
    margin:20px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    -o-border-radius:10px;
    border-radius:10px;
}

<a href="#overlay" id="open-overlay">Open Overlay</a>

<div id="overlay">
    <a href="#" class="close">&times;</a>
    <div style="height:20%"></div>
    
    <h2 style="font-size:35px">Pure CSS Overlay</h2>
    <br />
    <br />
    <br />
    <p style="font-size:22px;">This overlay is made using zero javascript. With the CSS :target pseudo class. You can target an element then change it's properties. Here we hide this div then show it upon targeting. (see the URL). To exit we'll just change the URL back!</p>
    
</div>
<div id="mask" onclick="document.location='#';"></div> <!-- the only javascript -->

这是一个纯粹的CSS3叠加在这里为你。至于居中; margin: 0 auto;

<强> FIDDLE DEMO HERE DUDE

Answer 4

使用CSS在屏幕上显示中心div

HTML

<div class="hm_container">
    <div class="hm_content"></div>
</div>

CSS

.hm_container{position: absolute; top: 50%; margin-top: -125px; left: 0; width: 100%;}

.hm_content{width:50%; margin-left: auto; margin-right: auto; height:150px; border:#000 solid 1px;}

DEMO1

使用CSS3的另一个演示

HTML

<div class="vhm"></div>

CSS

.vhm{min-height:200px; width:500px; left:50%; top:50%; border:#000 solid 1px; position:absolute;
    transform:translateX(-50%) translateY(-50%);
    -moz-transform:translateX(-50%) translateY(-50%);
    -webkit-transform:translateX(-50%) translateY(-50%);
    -o-transform:translateX(-50%) translateY(-50%);

    -moz-box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.5);
    box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.5);

    }

DEMO2

如何在屏幕上居中div（No JS）

4 个答案: