无论屏幕大小如何，都可以动态地将灯箱完美居中

Question

我有一个弹出式 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);';

理想情况下，我正在寻找的是能够在水平和垂直方向上动态居中光元素的样式，尽管光元素的大小取决于要显示的文件。因此，我不能简单地对高度和宽度进行硬编码。

Answer 1

有两种方法可以做到这一点：.lightbox {&nbsp; margin: 0 auto;}这仅在父组件内水平居中。如果这是您想要做的，这是一种非常简单的方法。如果没有，试试这个：.lightbox {&nbsp; position: absolute;&nbsp; top: 50%;&nbsp; left: 50%;&nbsp; transform: translate(-50%, -50%);}

Answer 2

垂直和水平居中元素的流行方法是使用：top: 50%;left: 50%;transform: translate( -50%, -50% );您可以将其与绝对或固定定位一起使用。top并将left左上角移动到屏幕中心，同时translate( -50%, -50% )将元素移回左侧和元素宽度/高度的顶部 50%，将元素的中心放在页面的中心。.box {&nbsp; position: fixed;&nbsp; top: 50%;&nbsp; left: 50%;&nbsp; transform: translate( -50%, -50% );&nbsp;&nbsp;&nbsp; /* For Demo */&nbsp; width: 75vw;&nbsp; height: 75vh;&nbsp; background-color: #ccc;}<div class="box"></div>

Answer 3

使用弹性盒：main {&nbsp; background-color: teal;}.modal-container {&nbsp; display: flex;&nbsp; justify-content: center;&nbsp; align-items: center;&nbsp; width: 100%;&nbsp; height: 100%;&nbsp; position: absolute;&nbsp; top: 0;&nbsp; right: 0;&nbsp; bottom: 0;&nbsp; left: 0;&nbsp; background-color: gray;}.modal {&nbsp; display: block;&nbsp; max-width: 300px;&nbsp; width: 90%;&nbsp; max-height: 300px;&nbsp; height: 90%;&nbsp; background-color: white;}<main>&nbsp; <div class="modal-container">&nbsp; &nbsp; <div class="modal">&nbsp; &nbsp; &nbsp; <h2>yes</h2>&nbsp; &nbsp; </div>&nbsp; </div></main>