无论屏幕大小如何，完美的中心灯光箱都是动态的。
无论屏幕大小如何，完美的中心灯光箱都是动态的。
提问于 2019-08-30 16:11:00
我有一个弹出的div，它可以根据文件附件来流视频或显示文档/图像。
我面临的问题是确保它是垂直和水平的，无论是桌面还是移动浏览器/应用程序。
我一直在尝试不同的属性，但就好像我改变了我已经拥有的一样，突然之间，它就离开了页面。
if(extension === "mp4"){
document.body.innerHTML += '<div id="light"><a class="boxclose" id="boxclose" onclick="lightbox_close();">x</a><video id="VideoLauncher" width="600" controls controlsList="nodownload"><source src="'+file+' " type="video/mp4"><!--Browser does not support <video> tag --></video></div><div id="fade" onClick="lightbox_close();"></div>'
}
if(extension === "jpg"){
document.body.innerHTML += '<div id="light"><a class="boxclose" id="boxclose" onclick="lightbox_close();">x</a><img id="VideoLauncher" width="600" src="'+file+'" onclick="lightbox_close()"></img></div><div id="fade" onClick="lightbox_close();"></div>'
}
if(extension === "pdf" || extension === "doc" || extension === "docx"){
document.body.innerHTML += '<div id="light"><a class="boxclose" id="boxclose" onclick="lightbox_close();">x</a><iframe src="https://docs.google.com/gview?url='+file+'&embedded=true" style="height:800px; width:600px;" frameborder="0"></iframe></div><div id="fade" onClick="lightbox_close();"></div>'
}
var LightEle = document.querySelector("#light");
var FadeEle = document.querySelector("#fade");
var BoxCloseEle = document.querySelector("#boxclose");
LightEle.style.cssText = 'display: none; position: absolute; top: 50%; left: 50%; max-width: 600px; max-height: 100%px; margin-left: -200px; margin-top: -180px; border: 2px solid #FFF; background: #FFF; z-index: 1002; overflow: visible;';
FadeEle.style.cssText = 'display: none; position: fixed; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index: 1001; -moz-opacity: 0.8; opacity: .80; filter: alpha(opacity=80);';理想情况下，我要寻找的是样式，它将动态地对light元素进行居中，无论是水平的还是垂直的，但是light元素的大小取决于它要显示的文件。正因为如此，我不能简单地硬编码高度和宽度。
Stack Overflow用户
回答已采纳
发布于 2019-08-30 16:28:11
有两种方法可以做到这一点：
.lightbox {
margin: 0 auto;
}这仅在父组件中水平地居中。这是一个非常简单的方式，如果这是你想要做的。
如果没有，请尝试如下：
.lightbox {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57730116
复制相关文章
相似问题
腾讯云开发者
