使用Javascript将div放在距窗口中心特定距离处

Question

我挣扎了一段时间，将一个距离假想中心窗口100px的div定位。

我的代码正在做：中间窗口/ 2 + 100px并不是我想要的：

var middle = screen.availWidth/2;
var position = middle+300;
document.getElementById('bookmarks').style.left = position + 'px';

使用这个代码，我的DIV根据窗口大小左右移动，我希望它距离中心100 px，根本不移动。

另外我知道这取决于浏览器。

对此有何帮助？

谢谢！ 维克

Answer 1

你说中间，但你没有说哪个轴，所以假设你想要x和y的中间，你可以使用以下代码。 注意：它为div分配200px的宽度和高度。

<body>
<div style="background-color: #000000; height: 200px; width: 200px; position: fixed;" id="bookmarks"></div>


<script>
var middleX = window.innerWidth/2;
var middleY = window.innerHeight/2;
var positionX = middleX-100;
var positionY = middleY-100;
document.getElementById('bookmarks').style.left = positionX + 'px';
document.getElementById('bookmarks').style.top = positionY + 'px';

</script>
</body>

另请注意，有更简洁的方法可以做到这一点。 我把它留下来这样你就可以理解逻辑然后自己清理它然后你也说你根本不想让它移动所以我认为你想要的位置：固定。

使用Javascript将div放在距窗口中心特定距离处

问题描述

1 个解决方案

解决方案1
2 已采纳 2011-04-08 17:05:26

使用Javascript将div放在距窗口中心特定距离处

问题描述

1 个解决方案

解决方案1 2 已采纳 2011-04-08 17:05:26

解决方案1
2 已采纳 2011-04-08 17:05:26