JSFiddle - React, Tailwind, and code Playground

HTML

<div id="field">
    <img src="https://js.cx/clipart/ball.svg" id="ball" width="40" height="40"> 
    . . .
    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 
    . . . . . . . . . . .
    . . . . . . . . . . . . . . . . . . . . . . . . .
    . . . . . 
    . . . . . . . . . . .
    . . . . . . . . . . . .
    . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 
    . . . . . . . . . . . . . . . . . . . .
  </div>

CSS

#field {
      width: 200px;
      border: 10px groove black;
      background-color: #00FF00;
      position: relative;
    }

    #ball {
      position: absolute;
    }

JavaScript

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';