JSFiddle - React, Tailwind, and code Playground

by Nickolay Ilchenko

HTML

<div id="field">
    <img src="http://learn.javascript.ru/files/tutorial/browser/dom/ball-source/ball.gif" id="ball" />
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 
</div>

CSS

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

JavaScript

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

ball.style.left = '50%';
ball.style.top = '50%';
ball.style.marginLeft = '-' + parseInt(getComputedStyle(ball, '').width, 10) / 2 + 'px';
ball.style.marginTop = '-' + parseInt(getComputedStyle(ball, '').height, 10) / 2 + 'px';