// source https://jsbin.com/fucifit

index.html

<style id="jsbin-css">
#thing {
  position: relative;
  width:40px;
  height:40px;
	/*left: 50px;*/
	/*top: 50px;*/
  background: url("https://www.docusign.com/sites/default/files/eSign_Icon_2.svg");
  background-repeat: no-repeat;
}
body {
  padding: 0px;
  margin: 0px;
  border: 1px #CECECE solid;
  background-color: #EEE;
  cursor: pointer;
}
</style>
<!--div id="contentContainer"-->
<div>
  <div id="thing">
  </div>
</div>
<script id="jsbin-javascript">
var theThing = document.querySelector("#thing");
var container = document.querySelector("body");
container.addEventListener("click", function(event) {
  var cln = theThing.cloneNode(true);
  console.log(event.clientX + " " + event.clientY);
  document.querySelector("body").appendChild(cln);
	var xPosition = event.clientX - container.getBoundingClientRect().left - (cln.clientWidth / 2);
	var yPosition = event.clientY - container.getBoundingClientRect().top - (cln.clientHeight / 2);
	// in case of a wide border, the boarder-width needs to be considered in the formula above
	cln.style.position = "absolute";
    cln.style.left = xPosition + "px";
	cln.style.top = yPosition + "px";  
});
container.addEventListener("mousemove", function(event) {
	var xPosition = event.clientX - container.getBoundingClientRect().left - (theThing.clientWidth / 2);
	var yPosition = event.clientY - container.getBoundingClientRect().top - (theThing.clientHeight / 2);
	// in case of a wide border, the boarder-width needs to be considered in the formula above
	theThing.style.left = xPosition + "px";
	theThing.style.top = yPosition + "px";
	}
);
</script>
<script id="jsbin-source-html" type="text/html"><\!--div id="contentContainer"-->
<div>
  <div id="thing">
  </div>
</div>
</script>

<script id="jsbin-source-css" type="text/css">
#thing {
  position: relative;
  width:40px;
  height:40px;
	/*left: 50px;*/
	/*top: 50px;*/
  background: url("https://www.docusign.com/sites/default/files/eSign_Icon_2.svg");
  background-repeat: no-repeat;
}
body {
  padding: 0px;
  margin: 0px;
  border: 1px #CECECE solid;
  background-color: #EEE;
  cursor: pointer;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">var theThing = document.querySelector("#thing");
var container = document.querySelector("body");
container.addEventListener("click", function(event) {
  var cln = theThing.cloneNode(true);
  console.log(event.clientX + " " + event.clientY);
  document.querySelector("body").appendChild(cln);
	var xPosition = event.clientX - container.getBoundingClientRect().left - (cln.clientWidth / 2);
	var yPosition = event.clientY - container.getBoundingClientRect().top - (cln.clientHeight / 2);
	// in case of a wide border, the boarder-width needs to be considered in the formula above
	cln.style.position = "absolute";
    cln.style.left = xPosition + "px";
	cln.style.top = yPosition + "px";  
});
container.addEventListener("mousemove", function(event) {
	var xPosition = event.clientX - container.getBoundingClientRect().left - (theThing.clientWidth / 2);
	var yPosition = event.clientY - container.getBoundingClientRect().top - (theThing.clientHeight / 2);
	// in case of a wide border, the boarder-width needs to be considered in the formula above
	theThing.style.left = xPosition + "px";
	theThing.style.top = yPosition + "px";
	}
);</script>

jsbin.fucifit.css

#thing {
  position: relative;
  width:40px;
  height:40px;
	/*left: 50px;*/
	/*top: 50px;*/
  background: url("https://www.docusign.com/sites/default/files/eSign_Icon_2.svg");
  background-repeat: no-repeat;
}
body {
  padding: 0px;
  margin: 0px;
  border: 1px #CECECE solid;
  background-color: #EEE;
  cursor: pointer;
}

jsbin.fucifit.js

var theThing = document.querySelector("#thing");
var container = document.querySelector("body");
container.addEventListener("click", function(event) {
  var cln = theThing.cloneNode(true);
  console.log(event.clientX + " " + event.clientY);
  document.querySelector("body").appendChild(cln);
	var xPosition = event.clientX - container.getBoundingClientRect().left - (cln.clientWidth / 2);
	var yPosition = event.clientY - container.getBoundingClientRect().top - (cln.clientHeight / 2);
	// in case of a wide border, the boarder-width needs to be considered in the formula above
	cln.style.position = "absolute";
    cln.style.left = xPosition + "px";
	cln.style.top = yPosition + "px";  
});
container.addEventListener("mousemove", function(event) {
	var xPosition = event.clientX - container.getBoundingClientRect().left - (theThing.clientWidth / 2);
	var yPosition = event.clientY - container.getBoundingClientRect().top - (theThing.clientHeight / 2);
	// in case of a wide border, the boarder-width needs to be considered in the formula above
	theThing.style.left = xPosition + "px";
	theThing.style.top = yPosition + "px";
	}
);