我有一個(gè)彈出式 div，可以根據(jù)文件附件流式傳輸視頻或顯示文檔/圖像。我遇到的問題是確保它在桌面和移動(dòng)瀏覽器/應(yīng)用程序中垂直和水平居中。我一直在嘗試不同的屬性，但這就像我改變了我已有的屬性，突然之間它就在頁面之外。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);';理想情況下，我正在尋找的是能夠在水平和垂直方向上動(dòng)態(tài)居中光元素的樣式，盡管光元素的大小取決于要顯示的文件。因此，我不能簡單地對(duì)高度和寬度進(jìn)行硬編碼。