Tailwind CSS移动端Web应用：如何让Spinner始终保持居中？

问题根源在于当前的定位逻辑：父容器使用relative h-screen，当页面内容超过屏幕高度时，父容器高度仍固定为屏幕尺寸，而Spinner基于这个固定高度容器做absolute定位。当页面滚动时，Spinner会停留在初始的屏幕中间位置，无法跟随视口移动。

解决方案：改用视口固定定位 #

将Spinner的容器从absolute改为fixed，让它基于浏览器视口定位，同时添加层级避免被内容遮挡：

<div class="relative">
    <!-- 使用fixed替代absolute，绑定视口定位 -->
    <div class="fixed inset-0 flex items-center justify-center z-50">
        <div class="loader"></div>
    </div>
    <ul> 
         <li> more contents </li>
         <li> .... </li>
         <!-- 更多加载的内容 -->
    </ul>
</div>

关键细节说明： #

• fixed：让元素脱离文档流，始终相对于浏览器视口固定位置，无论页面滚动多少，都会保持在视口中心。
• z-50：设置足够高的层级，确保Spinner始终显示在加载内容的上方，不会被新增内容遮挡。
• 父容器的h-screen可移除，让容器随内容自适应高度；若需父容器保持滚动区域，可添加overflow-auto h-screen，此时Spinner依然基于视口居中，不受容器内部滚动影响。

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