.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;<td> <input type="file" onchange="previewImage(this)" onclick="showPopup(this.src)"style="width: 100px; height: auto;" > </td>function previewImage(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { var img = document.createElement("img"); img.src = e.target.result; img.alt = "照片"; img.onclick = showPopup; input.parentNode.appendChild(img); input.style.display = "none"; // 隐藏原始的input元素 } reader.readAsDataURL(input.files[0]); } } function showPopup() { var popup = document.getElementById("popup"); var popupImg = document.getElementById("popupImg"); var scale = 1; // 设置弹出窗口中的图片 popupImg.src = this.src; popupImg.style.transform = `scale(${scale})`; // 显示弹出窗口 popup.style.display = "block"; // 添加点击事件监听器，点击其他区域时隐藏弹出窗口 popup.onclick = function () { popup.style.display = "none"; }; // 添加滚轮事件监听器，实现缩放功能 popup.onwheel = function (event) { event.preventDefault(); scale += event.deltaY * -0.01; scale = Math.max(1, scale); // 设置最小缩放比例 scale = Math.min(3, scale); // 设置最大缩放比例 popupImg.style.transform = `scale(${scale})`; }; }这段代码中我放大图片后位置偏移，没有出现子啊屏幕中间

根据你提供的代码，我注意到在放大图片后，位置偏移的问题可能是由于以下几个原因导致的：

1. 图片的位置定位方式不正确：在`.popup img`类中，使用了绝对定位（`position: absolute;`）和`transform: translate(-50%, -50%);`来实现图片居中显示。但是，当你放大图片时，可能需要调整这个定位方式，以便让放大后的图片在弹出窗口中居中显示。

2. 图片的缩放比例不正确：在`showPopup()`函数中，通过调整`scale`变量的值来实现图片的缩放功能。但是，使用了固定的最小缩放比例（`Math.max(1, scale)`）和最大缩放比例（`Math.min(3, scale)`），这可能导致在放大图片时无法居中显示。

为了解决这个问题，你可以尝试以下修改：

1. 调整图片的位置定位方式：在`.popup img`类中，将定位方式修改为相对定位（`position: relative;`），并且去掉`transform: translate(-50%, -50%);`。这样，放大后的图片将根据其父元素进行定位。

2. 动态计算图片的居中位置：在`showPopup()`函数中，在设置弹出窗口中的图片之前，先获取弹出窗口的宽度和高度，然后根据放大后的图片的大小和缩放比例，计算出图片应该在弹出窗口中居中显示的位置。可以使用以下代码实现：

// 在设置弹出窗口中的图片之前获取弹出窗口的宽度和高度
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";

通过以上修改，应该能够解决放大图片后位置偏移的问题。请尝试并查看效果。