在 NiceGUI 中使用自定义页眉（header）和页脚（footer）时，若容器未正确设置布局约束，页面主体内容易被覆盖；通过替换 absolute-center 为 mx-auto max-w-md items-center 可实现居中布局且避免遮挡。
在 nicegui 中使用自定义页眉（header）和页脚（footer）时，若容器未正确设置布局约束，页面主体内容易被覆盖；通过替换 `absolute-center` 为 `mx-auto max-w-md items-center` 可实现居中布局且避免遮挡。
NiceGUI 默认采用 Tailwind CSS 进行样式控制，而 absolute-center 是一个非标准的自定义类（常见于旧版示例或社区模板），它会将元素设为绝对定位并强行居中，导致其脱离文档流——这正是组件被 header 和 footer 覆盖的根本原因：绝对定位元素不占据空间，也不响应页面滚动与边界约束，顶部/底部区域自然“穿透”显示。
正确的解决方案是回归语义化、响应式的 Flexbox 布局逻辑。将原代码中：
with ui.column().classes('absolute-center items-center'):
yield
替换为：
with ui.column().classes('mx-auto max-w-md items-center w-full p-4'):
yield
✅ mx-auto：水平居中（需配合 w-full 或明确宽度）
✅ max-w-md：限制最大宽度（防宽屏下内容过散），可按需调整为 max-w-lg、max-w-screen-md 等
✅ items-center：保持子元素垂直居中对齐
✅ w-full：确保列占满父容器宽度（尤其在 flex 容器中至关重要）
✅ p-4（推荐添加）：提供内边距，避免内容紧贴视口边缘
⚠️ 注意事项：
- 不要再使用
absolute-center—— NiceGUI v2.x+ 已弃用该类，且它与header/footer的fixed或sticky行为天然冲突；- 若需全高布局（如侧边栏+主内容），应改用
ui.row().classes('h-screen')+ui.column().classes('flex-grow')结构；- 自定义
theme.py中的frame上下文管理器建议统一增加ui.column().style('margin-top: 4rem; margin-bottom: 3rem')作为兜底（但优先推荐 Tailwind 类方案）；- 所有样式类须以空格分隔，避免逗号或换行导致解析失败。
最终，你的 frame 上下文管理器中主体部分应简洁稳健：
@contextmanager
def frame(navigation_title: str):
ui.colors(primary='#6E93D6', secondary='#53B689', accent='#111B1E', positive='#53B689')
with ui.header(elevated=True):
# ... header 内容
with ui.column().classes('w-full mx-auto max-w-2xl items-center p-4'):
yield # 页面实际内容在此注入
with ui.left_drawer().classes('bg-blue-100'):
# ... 侧边菜单
with ui.footer().style('background-color: #3874c8'):
ui.label('Test Footer')
此方案兼顾可维护性、响应式表现与 NiceGUI 最佳实践，适用于模块化项目（如复用 theme.py 到多个应用），无需额外 JS 或 CSS 覆盖。
