将球放在场地中央
重要性：5
以下是源文档的外观
球场的中心坐标是多少？
计算它们并使用它们将球放置在绿色球场的中心
- 元素应该通过 JavaScript 移动，而不是 CSS。
- 代码应该适用于任何球的大小（
10、20、30像素）和任何球场的大小，而不是绑定到给定的值。
P.S. 当然，可以使用 CSS 进行居中，但这里我们想要的是纯 JavaScript。 此外，我们将在其他主题和更复杂的情况下遇到必须使用 JavaScript 的情况。 这里我们进行一个“热身”。
球体具有 position:absolute。 这意味着它的 left/top 坐标是从最近的定位元素测量的，即 #field（因为它具有 position:relative）。
坐标从球场的内部左上角开始。
球场的内部宽度/高度是 clientWidth/clientHeight。 所以球场的中心坐标是 (clientWidth/2, clientHeight/2)。
…但是，如果我们将 ball.style.left/top 设置为这样的值，那么球体本身不会居中，而是球体的左上角会居中。
ball.style.left = Math.round(field.clientWidth / 2) + 'px';
ball.style.top = Math.round(field.clientHeight / 2) + 'px';以下是它的外观。
为了使球体的中心与球场的中心对齐，我们应该将球体向左移动其宽度的一半，向上移动其高度的一半。
ball.style.left = Math.round(field.clientWidth / 2 - ball.offsetWidth / 2) + 'px';
ball.style.top = Math.round(field.clientHeight / 2 - ball.offsetHeight / 2) + 'px';现在球体终于居中了。
注意：陷阱！
当 <img> 没有宽度/高度时，代码将无法可靠地工作。
<img src="ball.png" id="ball">当浏览器不知道图像的宽度/高度（来自标签属性或 CSS）时，它会假设它们等于 0，直到图像加载完成。
因此，ball.offsetWidth 的值在图像加载之前将为 0。 这会导致上述代码中的坐标错误。
在第一次加载后，浏览器通常会缓存图像，并在重新加载时立即获得大小。 但是，在第一次加载时，ball.offsetWidth 的值为 0。
我们应该通过在 <img> 中添加 width/height 来解决这个问题。
<img src="ball.png" width="40" height="40" id="ball">…或者在 CSS 中提供大小。
#ball {
width: 40px;
height: 40px;
}