Nicegui 组件放在页面中间

可以使用以下方法将 组件 放在页面中间：

方法1：使用 ui.column() 居中对齐

with ui.column().classes('absolute-center items-center'):
    with ui.card():
        ui.label('卡片内容')
        # 其他卡片内容...

方法2：使用 CSS 类

with ui.card().classes('mx-auto my-auto'):
    ui.label('卡片内容')
    # 其他卡片内容...

方法3：更灵活的布局控制

with ui.row().classes('w-full h-screen justify-center items-center'):
    with ui.card().classes('w-96'):
        ui.label('卡片内容')
        ui.input(label='输入框')
        ui.button('提交')

方法4：响应式居中

with ui.column().classes('absolute-center items-center w-full max-w-md'):
    with ui.card().classes('w-full'):
        ui.label('居中卡片')
        with ui.row():
            ui.button('确定')
            ui.button('取消')

方法5：使用网格布局

with ui.grid(columns=1).classes('h-screen place-items-center'):
    with ui.card():
        ui.label('网格居中卡片')
        # 卡片内容...

完整示例

from nicegui import ui

# 方法1：推荐使用
with ui.column().classes('absolute-center items-center'):
    with ui.card().classes('w-96 shadow-lg'):
        ui.label('登录').classes('text-2xl font-bold text-center')
        ui.input(label='用户名').classes('w-full')
        ui.input(label='密码', password=True).classes('w-full')
        ui.button('登录', color='primary').classes('w-full')

ui.run()

说明：

• absolute-center：水平和垂直居中
• items-center：水平居中（在 column 中）
• justify-center：垂直居中（在 row 中）
• mx-auto：水平居中
• my-auto：垂直居中
• h-screen：全屏高度
• w-full：全宽度

选择适合你需求的方法即可。方法1和2最简洁，方法3最灵活。