Center a form_card

[5675sp]

Is there a way to place a form_card in the middle of the page (or this will be a future implementation)?

[mtanco]

You can use the align parameter of the flexible layout zones. Here's an example:

@app('/')
async def serve(q: Q):
    q.page['meta'] = ui.meta_card(
        box='',
        layouts=[
            ui.layout(
                breakpoint='xs',
                width='1200px',
                zones=[
                    ui.zone('header'),
                    ui.zone('body', align='center'),
                    ui.zone('footer'),
                ]
            )
        ]
    )
    q.page['header'] = ui.header_card(
        box='header',
        title='Center Form Card',
        subtitle='Learning application',
    )
    q.page['body'] = ui.form_card(
        box=ui.box('body', width='50%'),
        items=[
            ui.text_xl('Centered')
        ]
    )
    q.page['footer'] = ui.footer_card(
        box='footer',
        caption='Made with 💛 using [H2O Wave](https://github.com/h2oai/wave)!'
    )
    await q.page.save()

[mtanco]

The justify allows for center as well, along the other axis. In this case we can set the height of the zone to be larger than the card, and then get a centered card:
ui.zone('body', align='center', justify='center', size='500px'),

[5675sp]

Thank you @mtanco