CSS - 关于文档的中心div
问题描述:
我需要将模式与CSS集中。我用过position:fixed;顶部:50%;左:50%; 但是,由于该站点具有固定的左侧导航栏,因此它会对右侧的主内容div进行定位。我可以使用CSS来定位整个浏览器的宽度,忽略容器div吗?CSS - 关于文档的中心div
答
结账与评论新的简化版本。
#modal-overlay {
/* stretch overlay to all screen and fix it */
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
/* place it higher by z-axis */
z-index: 99999;
/*align children to center with flexbox */
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
/* simple styling*/
background: rgba(0, 0, 0, 0.8);
}
#modal {
/* simple styling*/
width: 400px;
padding: 20px;
background: #fff;
font-size: 25px;
text-align: center;
}
<div id="modal-overlay">
<div id="modal">
Hello world!
</div>
</div>
更多信息:
+0
您需要解释您正在做的事情,而不仅仅是交给他一条鱼。 – Rob
安置自己在这里你做了什么至今代码。如果你能创建一个[demo](http://www.jsfiddle.net)则更好。 – divy3993
我通过围绕模态制作一个包装并将其位置设置为0,0来计算出来。然后,我使用margin:0作为模式的中心 – user3689167