Поместите мяч в центр поля

Общая схема решения: позиционируем мяч абсолютно внутри поля.

При таком позиционировании координаты отсчитываются от внутреннего угла поля, например верхнего-левого:

Метрики для внутренней зоны поля — это clientWidth/Height.

Центр - это (clientWidth/2, clientHeight/2).

Но если мы установим мячу такие значения ball.style.left/top, то в центре будет не сам мяч, а его левый верхний угол:

var ball = document.getElementById('ball');
var field = document.getElementById('field');

ball.style.left = Math.round(field.clientWidth / 2)+'px';
ball.style.top = Math.round(field.clientHeight / 2)+'px';

Для того, чтобы центр мяча находился в центре поля, на нужно сместить мяч на половину его ширины влево и на половину его высоты вверх.

var ball = document.getElementById('ball');
var field = document.getElementById('field');

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.gif" id="ball">

Высота и ширина изображения неизвестны браузеру до тех пор, пока оно не загрузится, если только размер не указан в теге.

Поэтому, если изображение не в кеше браузера, то значение ball.offsetWidth равно 0, и вычислить координаты невозможно.

Чтобы это исправить, добавим width/height к картинке:

<img src="ball.gif" *!*width="40" height="40"*/!* id="ball">

Теперь браузер всегда знает ширину и высоту, так что все работает.

Полный код решения: tutorial/browser/dom/ball/index.html