选中时使元素浮动到div的中心

<div id="parentDiv">
  <div id="targetElement">选中时使元素浮动到div的中心</div>
</div>

#parentDiv {
  width: 300px;
  height: 200px;
  position: relative;
  border: 1px solid black;
}

#targetElement {
  width: 200px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: lightblue;
  text-align: center;
  line-height: 100px;
}

var targetElement = document.getElementById("targetElement");

targetElement.addEventListener("click", function() {
  var parentDiv = document.getElementById("parentDiv");
  var parentWidth = parentDiv.offsetWidth;
  var parentHeight = parentDiv.offsetHeight;
  var targetWidth = targetElement.offsetWidth;
  var targetHeight = targetElement.offsetHeight;
  
  var leftOffset = (parentWidth - targetWidth) / 2;
  var topOffset = (parentHeight - targetHeight) / 2;
  
  targetElement.style.transform = "translate(" + leftOffset + "px, " + topOffset + "px)";
});