JSFiddle - React, Tailwind, and code Playground

HTML

<button id="btn1">
  Кнопка
</button>
<div id="message">x: ?; y: ?</div>
<div id="mydiv">
<img id="myimg" src="http://cooltoys.kiev.ua/files/products/5016.128x128.jpg?ae51177419680cc63a0f9a808008a3f3" />
</div>

CSS

#mydiv {
  position:relative;
  border:1px #000 solid;
  width:500px;
  height:300px;
  background-color: #fff;
}

#myimg {
  position:relative;
}

JavaScript

/*
	Отцентровать картинку
  Добавить кнопки: увеличения и уменьшения картинки, возврата на начальную позицию
*/
var messageEl = document.getElementById('message');
document.getElementById('btn1').onclick = function(e) {
 // машинку на начало
 alert('check');
}
alert(document.getElementById('mydiv').getBoundingClientRect().left);
document.getElementById('mydiv').onclick = function(e) {
 var pEl = document.getElementById('myimg');
 pEl.style.top = e.clientY + 'px';
 pEl.style.left = e.clientX + 'px';
}

document.getElementById('mydiv').onmousemove = function(e) {
 messageEl.innerHTML = 'x: ' + e.x + '; y: ' + e.y;
}