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

我看了大约两个小时，如何在屏幕上居中显示一个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%;
}

---

感谢您的帮助：）

请不要使用

位置：绝对值

尝试

位置：固定值

使用

位置：固定值

，然后将其居中放置，如下所示：

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

这将使它集中在页面上，无论你在哪里。只要在需要时显示弹出窗口即可。请参阅底部的演示，了解它的外观

例如：

正文{
高度：3000px；
}
.弹出窗口{
宽度：200px；
高度：150像素；
边框：1px实心；
背景：红色；
位置：固定；
排名：0；
底部：0；
右：0；
左：0；
保证金：自动；
}

<代码>无论你在哪里滚动，我都保持在中间。< /代码>

/*
这是免费的javascript。。几乎。
这里我向您展示如何创建纯CSS3覆盖
这使用：target伪类
*/

*{margin:0；padding:0；}
#overlay{/*我们设置的所有属性都是overlay*/
身高：80%；
宽度：80%；
保证金：0自动；/*中央杜德*/
背景：白色；
颜色：黑色；
填充：10px；
位置：绝对位置；
最高：5%；
左：10%；
z指数：1000；
显示：无；
/*CSS 3*/
-webkit边界半径：10px；
-moz边界半径：10px；
-o-边界半径：10px；
边界半径：10px；
}
#掩码{/*创建是掩码*/
位置：固定；
排名：0；
左：0；
背景：rgba（0,0,0,0.6）；
z指数：500；
宽度：100%；
身高：100%；
显示：无；
}
/*使用：target查找到覆盖的链接，然后找到are mask*/
#覆盖：目标，#覆盖：目标+#遮罩{
显示：块；
不透明度：1；
}
.close{/*制作一个漂亮的纯CSS3关闭按钮*/
显示：块；
位置：绝对位置；
顶部：-20px；
右：-20px；
背景：红色；
颜色：白色；
高度：40px；
宽度：40px；
线高：40px；
字体大小：35px；
文字装饰：无；
文本对齐：居中；
字体大小：粗体；
-webkit边界半径：40px；
-moz边界半径：40px；
-o-边界半径：40px；
边界半径：40px；
}
#打开覆盖{/*打开覆盖*/
填充：10px 5px；
背景：蓝色；
颜色：白色；
文字装饰：无；
显示：内联块；
利润率：20px；
-webkit边界半径：10px；
-moz边界半径：10px；
-o-边界半径：10px；
边界半径：10px；
}

纯CSS覆盖






此覆盖使用零javascript创建。使用CSS:target伪类。可以将某个元素作为目标，然后更改其属性。在这里，我们隐藏这个div，然后在确定目标时显示它。（见网址）。要退出，我们只需重新更改URL

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

HTML

另一个使用CSS3的演示

HTML

---

为什么不能使用JavaScript？尝试使用

position:fixed

而不是absolute如果你的身体中有一个宽度为100%，高度为100%的div定位为absolute，你可以在其中添加弹出窗口并使用margin:0 auto方法。这样行吗？我想尽量少用JS，因为有些专家禁用了JS。请检查我的答案。您所需要的只是自动边距，而不是绝对定位。

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

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

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

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

    }