title: Vaadin formlayout won't centre
body: <p>I'm building a registration form in Vaadin 22 and I want the FormLayout to be in the centre of the page horizontally.</p>
  <p>The headlingLabel centres correctly but the form is always to the left hand side of the page.
  If I remove the setMaxWidth of the form the form fills the full width of the page.</p>
  <pre class="lang-java prettyprint-override"><code>package dev.onepub.ui.views.authed;
  
  import org.apache.logging.log4j.LogManager;
  import org.apache.logging.log4j.Logger;
  
  import com.vaadin.flow.component.UI;
  import com.vaadin.flow.component.button.Button;
  import com.vaadin.flow.component.checkbox.Checkbox;
  import com.vaadin.flow.component.formlayout.FormLayout;
  import com.vaadin.flow.component.formlayout.FormLayout.ResponsiveStep;
  import com.vaadin.flow.component.html.Label;
  import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
  import com.vaadin.flow.component.orderedlayout.VerticalLayout;
  import com.vaadin.flow.component.textfield.TextField;
  import com.vaadin.flow.data.binder.Binder;
  import com.vaadin.flow.router.Route;
  
  import dev.onepub.dao.DaoMember;
  import dev.onepub.entity.enums.ActionEnum;
  import dev.onepub.session.MemberSession;
  import dev.onepub.ui.DefaultView;
  import dev.onepub.ui.OnePubLayout;
  import dev.onepub.ui.crud.Access;
  
  /// Place holder for the re-registration process.
  
  @Access(required = ActionEnum.notRequired)
  @Route(value = &quot;Register&quot;, layout = OnePubLayout.class)
  public class RegistrationView extends VerticalLayout
  {
      private transient Logger logger = LogManager.getLogger();
  
      private static final long serialVersionUID = 1L;
      public static final String NAME = &quot;Register&quot;;
      public static final String LABEL = &quot;register&quot;;
  
      TextField firstName = new TextField(&quot;First name&quot;);
      TextField lastName = new TextField(&quot;Last name&quot;);
      TextField email = new TextField(&quot;Preferred Email&quot;);
      TextField publisher = new TextField(&quot;Organisation Name&quot;);
  
      Checkbox subscribe = new Checkbox(&quot;Subscribe to periodic newsletters for product features, tips and tricks.&quot;);
      Checkbox terms = new Checkbox();
  
      Button signup = new Button(&quot;Signup&quot;);
  
      private Binder&lt;Registration&gt; binder = new Binder&lt;&gt;(Registration.class);
  
      public RegistrationView()
      {
  
          this.setSizeFull();
          // this.setMargin(false);
  
          HorizontalLayout heading = new HorizontalLayout();
          heading.setWidth(&quot;100%&quot;);
          Label headingLabel = new Label(&quot;Please confirm the following details&quot;);
          this.add(headingLabel);
  
          final var form = new FormLayout();
          this.add(form);
          this.setAlignItems(Alignment.CENTER);
          this.setJustifyContentMode(JustifyContentMode.START);
          form.setMaxWidth(&quot;800px&quot;);
  
          terms.setLabelAsHtml(
                  &quot;I agree to both the &lt;a href='https://www.onepub.dev/terms' target='_blank'&gt;terms and conditions&lt;/a&gt;, and the &lt;a href='https://www.onepub.dev/privacy' target='_blank'&gt;privacy policy.&lt;/a&gt;&quot;);
  
          form.add(firstName, lastName, email, publisher, subscribe, terms, signup);
          form.setColspan(email, 2);
          form.setColspan(publisher, 2);
          form.setColspan(subscribe, 2);
          form.setColspan(terms, 2);
          form.setColspan(signup, 2);
  
          form.setResponsiveSteps(
                  // Use one column by default
                  new ResponsiveStep(&quot;0&quot;, 1),
                  // Use two columns, if layout's width exceeds 500px
                  new ResponsiveStep(&quot;500px&quot;, 2));
  
          binder.bindInstanceFields(this);
  
          final var member = MemberSession.getCurrent().loggedInMember;
  
          final var registration = new Registration(member);
          binder.setBean(registration);
  
          signup.addClickListener(event -&gt; save());
  
      }
  
      private void save()
      {
          Registration registration = binder.getBean();
          final var member = new DaoMember().findByEntity(MemberSession.getCurrent().loggedInMember);
          member.setFirstname(registration.firstName);
          member.setSurname(registration.lastName);
          member.setPreferredEmail(registration.email);
          member.getPublisher().setName(registration.publisher);
          member.setAcceptedTerms(terms.getValue());
          member.setSubcribed(subscribe.getValue());
  
          UI.getCurrent().navigate(DefaultView.class);
  
      }
  
  }
  </code></pre>