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

Question

我看了大约两个小时，如何在屏幕上居中显示一个 div。因此，当您向下滚动一个大页面并单击一个链接时，“弹出”div 应该出现在屏幕中心，而不是页面中心。

如果你采用这样的代码，它只会在页面上居中 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;

无论您身在何处，这都会使其在页面上居中。只需在需要时显示弹出窗口。请参阅底部的演示，了解它的外观。

例子：

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

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

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

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