Question

我正在尝试垂直和水平对齐div。问题是div位置不居中。这是我使用的代码

<html>
<head>
 <meta charset="utf-8">
 <title>index</title>
 <script type="text/javascript" charset="utf-8">
   window.onload = function(){
   var width = screen.availWidth;
   var height = screen.availHeight;

   var modalWindow = document.getElementById('dialog');

   modalWindow.style.left = (width - modalWindow.offsetWidth) / 2;
   modalWindow.style.top = (height - modalWindow.offsetHeight) / 2;
}
 </script>
<style type="text/css" media="screen">
body{
 padding:0;
 margin:0;
}
div#overlay{
 position: absolute;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  background: rgba(0,0,0,0.4);
  z-index: 9998;
}

div#overlay #dialog{
  width: 200px;
  position: absolute;
  height: 100px;
  background: white;
}
</style>
</head>
<body>
<div id="overlay">
 <div id="dialog">
  <p>some text goes here</p>
  </div>
</div>
</body>
</html>

对话框div的位置略微位于右侧和底部。这是一个截图 enter image description here 我做错了什么？

Answer 1

无需使用Javascript。因为您的dialog元素具有设置的高度/宽度，所以您可以这样做：

div#overlay #dialog{
  display:block;
  width:200px;
  height:100px;
  position:absolute;
  top:50%;
  left:50%;
  margin-top:-50px;
  margin-left:-100px;
  background: white;
}

这里是Fiddle

Answer 2

你定位在盒子的角落，而不是中心，所以你需要在计算位置时考虑到这一点......

modalWindow.style.left = ((width - modalWindow.offsetWidth) / 2) - 100 ;
modalWindow.style.top  = ((height - modalWindow.offsetHeight) / 2) - 50;

100和50是高度的一半，宽度的一半。

使用javascript定位div

2 个答案: