如何在div中将单击的图像定位到视区的水平中心？

<div id="myDiv">
  <img src="image.jpg" alt="Image" onclick="centerImage(event)">
</div>

<script>
function centerImage(event) {
  var image = event.target;
  var div = document.getElementById("myDiv");
  var divWidth = div.offsetWidth;
  var viewportWidth = div.clientWidth;
  var left = (viewportWidth - image.offsetWidth) / 2;
  image.style.left = left + "px";
}
</script>