使用next.js调整窗口大小时无法使图像居中

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

// 在组件加载完成后添加事件监听器
useEffect(() => {
  window.addEventListener("resize", handleResize);
  return () => {
    window.removeEventListener("resize", handleResize);
  };
}, []);

// 处理窗口大小改变事件
const handleResize = () => {
  const image = document.getElementById("image");
  const container = document.getElementById("container");

  const imageWidth = image.offsetWidth;
  const containerWidth = container.offsetWidth;
  const offset = (containerWidth - imageWidth) / 2;

  image.style.transform = `translateX(${offset}px)`;
};