Whow to place the Vaadin standard login form in center?

Flow
1

I have a login form that are connected to Spring Security. I want that login form to be in center of the screen, but it ain’t happening. Tell me, have I forgot something?

@Tag("sa-login-view")
@Route(value = LoginView.ROUTE)
@PageTitle("Login")
public class LoginView extends HorizontalLayout implements BeforeEnterObserver { // 

	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;

	public static final String ROUTE = "login";

	private LoginForm login = new LoginForm();

	public LoginView(){
		
		add(login); // <-- This need to be in middle center
		setAlignItems(Alignment.CENTER); // Place in the center
		login.setAction("login");
		
	}

	@Override
	public void beforeEnter(BeforeEnterEvent event) { // 


		// inform the user about an authentication error
		// (yes, the API for resolving query parameters is annoying...)
		if(!event.getLocation().getQueryParameters().getParameters().getOrDefault("error", Collections.emptyList()).isEmpty()) {
			login.setError(true); // 


		}
	}
}
2

setAlignItems(Alignment.CENTER); // Place in the center
This does not do what you think it does. it aligns the items vertically in a HorizontalLayout, but horizontally in a VerticalLayout. You need define the [JustifyContentMode]
(https://vaadin.com/api/platform/14.1.4/com/vaadin/flow/component/orderedlayout/FlexComponent.JustifyContentMode.html#CENTER) of the layout to JustifyContentMode.CENTER.
A good visualisation of the different justify-content values of the layouts can be seen (and fiddled with) [here]
(https://vaadin.com/components/vaadin-ordered-layout/java-examples)

setAlignItems(Alignment.CENTER); // vertical centering for HorizontalLayouts
setJustifyContentMode(JustifyContentMode.CENTER); // horizontal centering for HorizontalLayouts

Another possibility is to use the LoginOverlay instead of the LoginForm - the overlay is automatically placed in the center of the screen. [Read more about their differences]
(https://stackoverflow.com/questions/59482312/loginform-versus-loginoverlay-in-vaadin-14)

3

Kaspar Scherrer:
setAlignItems(Alignment.CENTER); // Place in the center
This does not do what you think it does. it aligns the items vertically in a HorizontalLayout, but horizontally in a VerticalLayout. You need define the [JustifyContentMode]
(https://vaadin.com/api/platform/14.1.4/com/vaadin/flow/component/orderedlayout/FlexComponent.JustifyContentMode.html#CENTER) of the layout to JustifyContentMode.CENTER.
A good visualisation of the different justify-content values of the layouts can be seen (and fiddled with) [here]
(https://vaadin.com/components/vaadin-ordered-layout/java-examples)

setAlignItems(Alignment.CENTER); // vertical centering for HorizontalLayouts
setJustifyContentMode(JustifyContentMode.CENTER); // horizontal centering for HorizontalLayouts

Another possibility is to use the LoginOverlay instead of the LoginForm - the overlay is automatically placed in the center of the screen. [Read more about their differences]
(https://stackoverflow.com/questions/59482312/loginform-versus-loginoverlay-in-vaadin-14)

Nope!

None of these works.

Not even the LoginOverlay shows up.

@Tag("sa-login-view")
@Route(value = LoginView.ROUTE)
@PageTitle("Login")
public class LoginView extends HorizontalLayout implements BeforeEnterObserver { // 

	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;

	public static final String ROUTE = "login";

	private LoginOverlay login = new LoginOverlay();

	public LoginView(){
		
		add(login);
		login.setAction("login");
		
	}

	@Override
	public void beforeEnter(BeforeEnterEvent event) { // 


		// inform the user about an authentication error
		// (yes, the API for resolving query parameters is annoying...)
		if(!event.getLocation().getQueryParameters().getParameters().getOrDefault("error", Collections.emptyList()).isEmpty()) {
			login.setError(true); // 


		}
	}
}

With the LoginForm - Nothing happens. Still on the left side.

package se.danielmartensson.jlogger.ui;


import java.util.Collections;

import com.vaadin.flow.component.Tag;
import com.vaadin.flow.component.login.LoginForm;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.router.BeforeEnterEvent;
import com.vaadin.flow.router.BeforeEnterObserver;
import com.vaadin.flow.router.PageTitle;
import com.vaadin.flow.router.Route;

@Tag("sa-login-view")
@Route(value = LoginView.ROUTE)
@PageTitle("Login")
public class LoginView extends HorizontalLayout implements BeforeEnterObserver { // 

	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;

	public static final String ROUTE = "login";

	private LoginForm login = new LoginForm();

	public LoginView(){
		
		setAlignItems(Alignment.CENTER);
		setJustifyContentMode(JustifyContentMode.CENTER); // horizontal centering for HorizontalLayouts	
		add(login);
		login.setAction("login");
		
	}

	@Override
	public void beforeEnter(BeforeEnterEvent event) { // 


		// inform the user about an authentication error
		// (yes, the API for resolving query parameters is annoying...)
		if(!event.getLocation().getQueryParameters().getParameters().getOrDefault("error", Collections.emptyList()).isEmpty()) {
			login.setError(true); // 


		}
	}
}