JSFiddle - React, Tailwind, and code Playground

by Mark Ulybkin

HTML

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

CSS

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

    #ball {
      position: absolute;
    }

JavaScript

var img = new Image();
  img.onload = function()
  {
      var intImageWidth = this.width;
      var intImageHeight = this.height;
   
      ball.style.marginTop = (field.clientHeight/2 - intImageHeight/2)+ 'px';  
      ball.style.marginLeft = (field.clientWidth/2 - intImageWidth/2)+ 'px';  
  }
  
  img.src = ball.getAttribute('src');