使被调用的块相对于父块JS居中

<div id="parentBlock">
  <div id="childBlock">被调用的块</div>
</div>

#parentBlock {
  position: relative;
  width: 500px;
  height: 300px;
  border: 1px solid black;
}

#childBlock {
  position: absolute;
  width: 200px;
  height: 100px;
  background-color: lightblue;
}

window.onload = function() {
  var parentBlock = document.getElementById("parentBlock");
  var childBlock = document.getElementById("childBlock");

  var parentWidth = parentBlock.offsetWidth;
  var parentHeight = parentBlock.offsetHeight;
  var childWidth = childBlock.offsetWidth;
  var childHeight = childBlock.offsetHeight;

  var leftMargin = (parentWidth - childWidth) / 2;
  var topMargin = (parentHeight - childHeight) / 2;

  childBlock.style.left = leftMargin + "px";
  childBlock.style.top = topMargin + "px";
};