Как уменьшить размер простой формы и разместить ее посередине экрана

У меня есть следующая простая форма:

<Page title = "{i18n>authorization}">
    <content>
        <VBox>
            <f:SimpleForm id = "registration" editable = "true" layout = "ResponsiveGridLayout" labelSpanXL = "3" labelSpanL = "3" labelSpanM = "3" labelSpanS = "12"
                adjustLabelSpan = "true" emptySpanXL = "3" emptySpanL = "3" emptySpanM = "3" emptySpanS = "0" columnsXL = "1" columnsL = "1" columnsM = "1"
                singleContainerFullSize = "true">
                <f:content>
                    <Label text = ""/>
                    <Text text = "{i18n>userAuthorize}"/>
                    <Label text = ""/>
                    <Input placeholder = "Enter your email address" id = "email" type = "Email" value = "{confirm>/email}" liveChange = "onHandleLiveChangeEmail"/>
                    <Label text = ""/>
                    <Button type = "Accept" enabled = "{confirm>/enable}" text = "{i18n>confirm}" press = "handlePressAuthorization"
                        ariaDescribedBy = "acceptButtonDescription genericButtonDescription">
                        <layoutData>
                            <FlexItemData growFactor = "1"/>
                        </layoutData>
                    </Button>
                </f:content>
            </f:SimpleForm>
        </VBox>
    </content>
</Page>

а на большом экране он растягивается слишком широко. Что бы я хотел, чтобы простая форма занимала ширину в 4 столбца и располагалась посередине экрана.
Как мне это сделать?