Margin Auto in bigger screens

I want to show the MainLayout in the center in bigger screens so I set margin:auto but it is not doing anything. So there are lot of whitespaces in the screen which doesn’t look good. How to have margins at the right and left for the whole application?

Could you please provide more information about main layout, maybe a simplified code example?

If it extends VerticalLayout or HorizontalLayout you could achieve that by putting the following code in MainLayout class:

setAlignItems(Alignment.CENTER);
setJustifyContentMode(JustifyContentMode.CENTER);
setHeightFull(); // Maybe not necessary

If it extends something like a Div then you could do the following:

getStyle().set("display", "flex")
    .set("justify-content", "center")
    .set("align-items", "center");

Thanks for the response. I’m using AppLayout. When I try to center them, only the content is getting centralized. But I need navigation, drawer everything to be centralized.

Are you saying you want to center the AppLayout itself? You might be able to by giving it a max-width and centering it, but I’m not sure how the side nav works in that case as it’s designed to be on the side.

Vaadin discourse is doing that. In bigger screens, side navigation is not on the side. It is smoothly auto arranging based on the screen sizes.

Yes. I meant that I don’t know if the ApplicationLayout component itself is designed to take that into account. You can try it out and see how it behaves. It may work.