如何使用Javascript对齐pop up div

<button onclick="showPopup()">点击弹出</button>
<div id="popup" style="display: none;">
  弹出内容
</div>

function showPopup() {
  var popup = document.getElementById("popup");
  popup.style.display = "block";

  // 对齐弹出div
  var screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  var screenHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
  var popupWidth = popup.offsetWidth;
  var popupHeight = popup.offsetHeight;

  var left = (screenWidth - popupWidth) / 2;
  var top = (screenHeight - popupHeight) / 2;

  popup.style.left = left + "px";
  popup.style.top = top + "px";
}

#popup {
  position: fixed;
  width: 200px;
  height: 200px;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 10px;
}