How decrease the size of simple form and place in the middle of the screen - sapui5

Question

I have the following simple form:
<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>
and on the large screen, it stretches too width. What I would like that the simple form should take 4 columns width and place in the middle of screen.
How can I do it?

Answer 1

Try giving your VBox control a specific width. That way the SimpleForm will only fit that. In the VBox you can also add the alignItems="Center" attribute.
If you want to center controls and also not to the full width of the screen, you can do the following:
<VBox width="100%" alignItems="Center">
<VBox width="50%" alignItems="Start">
<!-- Content goes here... -->
</VBox>
</VBox>
This way your controls will be centered and also only stretched to the width of the inner VBox.