如何在Next.js中使用Tailwind实现加载动画居中

只需调整Loader组件中容器的定位与布局类，即可让加载动画居中显示。以下是具体修改方案：

修改后的 loading.jsx #

import './loading.css'
export default function Loader() {
    return (
            <div className="fixed inset-0 grid place-items-center spinner">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
    )
}

关键修改说明： #

• fixed：将元素相对于浏览器视口定位，确保加载动画在页面滚动时仍保持在屏幕中央，适配全局加载场景。
• inset-0：等价于设置top: 0; right: 0; bottom: 0; left: 0，让容器占满整个视口范围。
• place-items-center：同时设置justify-items: center和align-items: center，确保内部加载动画元素在容器内水平、垂直双向居中，比原有的justify-center content-center更简洁高效。

若偏好使用absolute定位，也可改为：

<div className="absolute inset-0 grid place-items-center spinner">

但需保证Loader的父元素未设置relative定位，否则动画会相对于父元素而非视口居中。

内容的提问来源于stack exchange，提问作者Sahil Dhingra