Next.js中使用loading.tsx如何将加载组件定位到屏幕中央？

直接修改你的loading.tsx代码，给外层div添加Tailwind定位和居中类即可：

import React from 'react'

const Loading = () => {
    return (
      <div className="fixed inset-0 flex items-center justify-center bg-white/80">       
          <span className="loading loading-ring loading-lg"></span>
      </div>
  )
}

export default Loading

关键类说明： #

• fixed：将元素固定在视口，不会随页面滚动移动
• inset-0：让元素占满整个屏幕（等效于设置top/right/bottom/left为0）
• flex items-center justify-center：通过flex布局实现加载图标的垂直+水平居中
• bg-white/80：可选的半透明白色背景，避免加载过程中页面内容干扰视觉，提升用户体验

如果不需要背景，去掉bg-white/80即可，核心的居中逻辑由fixed inset-0 flex items-center justify-center实现。

内容的提问来源于stack exchange，提问作者Rasindu Rawishanka