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>
  
  <button id="center">Поставить мяч по центру</button>

SCSS

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

    #ball {
      position: absolute;
      transition: 1s;
      left: 0;
      top: 0;
      &.centered {
        left: 50%;
        top: 50%;
        margin: -20px 0 0 -20px;
      }
    }

JavaScript

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


center.onclick = function(){
	ball.className = 'centered';
}