snippetreactCritical

How to center a component in Material UI and make it responsive?

Submitted by: @import:stackoverflow-api·Mar 10, 2026·

Viewed 0 times

responsivemakeandcenterhowcomponentmaterial

Problem

I don't quite understand the Material UI grid system. If I want to use a form component for login, what is the easiest way to center it on the screen on all devices (mobile and desktop)?

Solution

Since you are going to use this on a login page.
Here is a code I used in a Login page using Material UI

Material UI v5

Material UI v4 and below

this will make this login form at the center of the screen.

But still, IE doesn't support the Material-UI Grid and you will see some misplaced content in IE.

As pointed by @max, another option is,

Please note that versions Material UI v4 and below should use justify="center" instead.

However, using a Grid container without a Grid item is an undocumented behavior.

Update on 2022-06-06

In addition to that, another new and better approach will be using the Box component.

This was originally posted by Killian Huyghe as another answer.

Hope this will help you.

Code Snippets

<Grid
  container
  spacing={0}
  direction="column"
  alignItems="center"
  justifyContent="center"
  sx={{ minHeight: '100vh' }}
>
  <Grid item xs={3}>
    <LoginForm />
  </Grid>
</Grid>

<Grid
  container
  spacing={0}
  direction="column"
  alignItems="center"
  justify="center"
  style={{ minHeight: '100vh' }}
>
  <Grid item xs={3}>
    <LoginForm />
  </Grid>
</Grid>

<Grid container justifyContent="center">
  <Your centered component/>
</Grid>

<Box
  display="flex"
  justifyContent="center"
  alignItems="center"
  minHeight="100vh"
>
  <YourComponent/>
</Box>

Context

Stack Overflow Q#50766693, score: 455

Revisions (0)

No revisions yet.