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

对于使用next.js调整窗口大小时无法使图像居中的问题，可以采取以下步骤进行调整和解决：

首先，确保在使用next.js开发时，已正确配置和使用CSS样式。CSS样式可用于控制元素的布局和位置。请参考next.js文档和官方教程，了解如何正确引入和使用CSS样式。
在图像容器的样式中，使用flex布局或居中对齐的CSS属性来使图像居中。例如，可以在图像容器的样式中添加以下CSS代码：

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

这将使图像在容器中水平和垂直居中。

如果问题仍然存在，可以考虑使用JavaScript来动态计算并调整图像位置。可以在窗口大小改变时，通过添加事件监听器来触发相应的函数。在该函数中，可以获取图像和容器的宽度和高度，并计算出使图像居中所需的偏移量。然后，使用CSS的transform属性来应用偏移量。以下是一个示例代码：

// 在组件加载完成后添加事件监听器
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)`;
};

请注意，上述代码仅是示例，实际上需要根据具体情况进行调整和优化。