使叠加层的内容在中间
[英]Make the content of the overlay in the middle
问题描述
Goal: 
目标：
The overlay content should be in the middle of the page. 叠加层内容应位于页面中间。
Problem: 问题：
I cannot make the overlay content (the white box) to be in the middle. 我无法使叠加层内容（白框）位于中间。 What syntax am I missing? 我缺少什么语法？
Thank you! 谢谢！
function openNav() { document.getElementById("myNav").style.height = "100%"; } function closeNav() { document.getElementById("myNav").style.height = "0%"; }
body { margin: 0; font-family: 'Lato', sans-serif; } .overlay { height: 0%; width: 100%; position: fixed; z-index: 1; top: 0; left: 0; background-color: rgb(0,0,0); background-color: rgba(0,0,0, 0.8); overflow-y: hidden; transition: 0.5s; } .overlay-content { position: relative; top: 10%; width: 70%; text-align: left; margin-top: 30px; background: white } .overlay a { padding: 8px; text-decoration: none; font-size: 36px; color: #818181; display: block; transition: 0.3s; } .overlay a:hover, .overlay a:focus { color: #f1f1f1; } .overlay .closebtn { position: absolute; top: 20px; right: 45px; font-size: 60px; } @media screen and (max-height: 450px) { .overlay {overflow-y: auto;} .overlay a {font-size: 20px} .overlay .closebtn { font-size: 40px; top: 15px; right: 35px; } }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div id="myNav" class="overlay"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> <div class="overlay-content"> <a href="#">About</a> <a href="#">Services</a> <a href="#">Clients</a> <a href="#">Contact</a> </div> </div> <h2>Fullscreen Overlay Nav Example</h2> <p>Click on the element below to open the fullscreen overlay navigation menu.</p> <p>In this example, the navigation menu will slide downwards from the top:</p> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> </body> </html>
3 个解决方案
解决方案1
0 2017-04-04 08:39:52
Use CSS3 translateY to make variable height element centered on screen. 使用CSS3 translateY可使高度可变的元素居中显示在屏幕上。
function openNav() { document.getElementById("myNav").style.height = "100%"; } function closeNav() { document.getElementById("myNav").style.height = "0%"; }
body { margin: 0; font-family: 'Lato', sans-serif; } .overlay { height: 0%; width: 100%; position: fixed; z-index: 1; top: 0; left: 0; background-color: rgb(0,0,0); background-color: rgba(0,0,0, 0.8); overflow-y: hidden; transition: 0.5s; } .overlay-content { position: relative; top: 50%; transform: translateY(-50%) translateX(-50%); width: 70%; left: 50%; text-align: left; background: white; } .overlay a { padding: 8px; text-decoration: none; font-size: 36px; color: #818181; display: block; transition: 0.3s; } .overlay a:hover, .overlay a:focus { color: #f1f1f1; } .overlay .closebtn { position: absolute; top: 20px; right: 45px; font-size: 60px; } @media screen and (max-height: 450px) { .overlay {overflow-y: auto;} .overlay a {font-size: 20px} .overlay .closebtn { font-size: 40px; top: 15px; right: 35px; } }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div id="myNav" class="overlay"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> <div class="overlay-content"> <a href="#">About</a> <a href="#">Services</a> <a href="#">Clients</a> <a href="#">Contact</a> </div> </div> <h2>Fullscreen Overlay Nav Example</h2> <p>Click on the element below to open the fullscreen overlay navigation menu.</p> <p>In this example, the navigation menu will slide downwards from the top:</p> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> </body> </html>
解决方案2
0 已采纳 2017-04-04 08:41:11
You can try this: 您可以尝试以下方法：
.overlay-content {
position: relative;
top: 10%;
width: 70%;
text-align: left;
margin: 30px auto;
background: white
}
解决方案3
0 2017-04-04 08:52:04
<div id="myNav" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="overlay-content">
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
Hi, I think above section is for your overlay. 嗨，我认为以上是您的叠加图。 Right? 对？ Then you can use following styles to make the overlay content (the white box) to be in the middle. 然后，您可以使用以下样式使叠加内容（白框）位于中间。
.overlay {
position: fixed;
display: table;
float: none;
width: 100%;
height: 100%;
z-index: 1;
background-color: rgba(0,0,0, 0.8);
transition: 0.5s;
}
.overlay-content {
vertical-align: middle;
display: table-cell;
margin: 0 auto;
float: none;
width: 70%;
height: auto;
text-align: left;
background: #fff;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
在打印页面的页面中间制作内容 - make content in the middle of the page in printing page
内容在中间 - Content in the middle
在屏幕中间的网站内容上点击图片 - Make clickable image in the middle of screen over the content of site
如何使内容从中间/顶部开始而不是从底部开始？ - How to make content start in the middle/top instead of the bottom?
屏幕中间的图片+叠加层 - Center image in the middle of screen + overlay
屏幕中间的重叠位置和淡入淡出 - Overlay Position and Fade in Middle of Screen
Fancybox叠加覆盖内容 - Fancybox overlay is covering content
在反向拉伸时叠加内容 - overlay content on backstretch
有没有办法让背景向下滚动，而某些内容始终停留在中间？ - is there a way to make a background scroll down while some content stay in the middle at all time?
如何使用angular js使除中间的div内容之外的整个页面模糊？ - How to make blur the whole page except the div content in the middle using angular js?
相关标签