Question

如何使用javascript将弹出部门与显示器/屏幕中心对齐？

我尝试使用screen.width和screen.height来获得中心。但是该部门与垂直滚动页面的中心对齐

提前感谢您的任何帮助和建议

Answer 1

试试这个：

<div id="popup" class="popup">
  This a vertically and horizontally centered popup.
</div>

<a onclick="showPopup('popup');">Show Popup</a>

<style type="text/css">
  .popup {
    width:200px;
    height:100px;
    position:absolute;
    top:50%;
    left:50%;
    margin:-50px 0 0 -100px; /* [-(height/2)px 0 0 -(width/2)px] */
    display:none;
  }
</style>

<script type="text/javascript">
  function showPopup(id) {
    var popup = document.getElementById(id);
    popup.style.display = 'block';
  }
</script>

CSS解释： div是200x100，你从顶部定位50％，从左边定位50％，但为了让它完全居中，你需要从50％的值减去宽度和高度的一半，这样做的方法是使用负边距，因此margin-top应该是height / 2的负值，margin-left应该是width / 2的负值。

Answer 2

如何使用CSS：

<div class="div">Some Content......</div>

.div {
   margin-left: auto;
   margin-right: auto;
}

Answer 3

尝试：

 function msgBox(message)
 {
  var msgbox = document.getElementById("msgbox");
  msgbox.innerHTML = message;
  var x = (window.innerWidth / 2) - (msgbox.offsetWidth / 2);
  var y = (window.offsetHeight / 2) - (msgbox.offsetHeight / 2);              
  msgbox.style.top = y;
  msgbox.style.left = x;
  msgbox.style.display = "block";
 }

Answer 4

尝试固定定位：

#box {
  position: fixed;
  width: 40%;
  margin: 200px 30%;
}

它只是水平居中。垂直将需要一些玩。我不知道浏览器如何对垂直对齐采取不同的行为。

Answer 5

我在任何需要滚动的网页上也存在这种垂直居中问题。

切换到位置：固定解决了它，所以：

position:fixed;
top:50%;
left:50%;
margin:-50px 0 0 -100px; /* [-(height/2)px 0 0 -(width/2)px] */

这适用于firefox，google chrome，safari（pc）和IE9。

不幸的是，我希望它出现在pdf file前面 - 弹出窗口确实出现在前面，使用Firefox，Chrome但在IE9和Safari中落后......

如何使用Javascript对齐pop up div

5 个答案: