.popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: none; overflow: hidden; } .popup img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 100%; max-height: 100%; cursor: zoom-in; }function showPopup() { var popup = document.getElementById("popup"); var popupImg = document.getElementById("popupImg"); var scale = 1; // 在设置弹出窗口中的图片之前获取弹出窗口的宽度和高度 var popupWidth = popup.offsetWidth; var popupHeight = popup.offsetHeight; // 计算图片应该在弹出窗口中居中显示的位置 var imgLeft = (popupWidth - popupImg.width * scale) ; var imgTop = (popupHeight - popupImg.height * scale); // 设置弹出窗口中的图片位置 popupImg.style.left = imgLeft + "px"; popupImg.style.top = imgTop + "px"; // 设置弹出窗口中的图片 popupImg.src = this.src; popupImg.style.transform = `scale(${scale})`; // 显示弹出窗口 popup.style.display = "block"; // 添加点击事件监听器，点击其他区域时隐藏弹出窗口 popup.onclick = function () { popup.style.display = "none"; }; 点击图片后，图片放大但是未显示在屏幕中间，而且未以弹窗的形式显示

您的代码中，设置图片居中显示的位置的计算有误。以下是修正后的代码：

function showPopup() {
  var popup = document.getElementById("popup");
  var popupImg = document.getElementById("popupImg");
  var scale = 1;

  // 在设置弹出窗口中的图片之前获取弹出窗口的宽度和高度
  var popupWidth = popup.offsetWidth;
  var popupHeight = popup.offsetHeight;

  // 计算图片应该在弹出窗口中居中显示的位置
  var imgLeft = (popupWidth - popupImg.width * scale) / 2;
  var imgTop = (popupHeight - popupImg.height * scale) / 2;

  // 设置弹出窗口中的图片位置
  popupImg.style.left = imgLeft + "px";
  popupImg.style.top = imgTop + "px";

  // 设置弹出窗口中的图片
  popupImg.src = this.src;
  popupImg.style.transform = `scale(${scale})`;

  // 显示弹出窗口
  popup.style.display = "block";

  // 添加点击事件监听器，点击其他区域时隐藏弹出窗口
  popup.onclick = function () {
    popup.style.display = "none";
  };
}

这样修改后，图片应该会正确居中显示，并以弹窗的形式显示在屏幕上。