How to center a component in MUI and make it responsive?

Question

I don't quite understand the React 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 1

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

MUI v5

<Grid
  container
  spacing={0}
  direction="column"
  alignItems="center"
  justifyContent="center"
  style={{ minHeight: '100vh' }}
>

  <Grid item xs={3}>
   <LoginForm />
  </Grid>   
   
</Grid> 

MUI v4 and below

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

  <Grid item xs={3}>
    <LoginForm />
  </Grid>   

</Grid> 

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,

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

Please note that versions MUIv4 and below should use justify="center" instead.

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

Hope this will help you.

Solution 2

Another option is:

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

Solution 3

You can do this with the Box component:

import Box from "@material-ui/core/Box";

...

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

Solution 4

Here is another option without a grid:

<div
    style={{
        position: 'absolute', 
        left: '50%', 
        top: '50%',
        transform: 'translate(-50%, -50%)'
    }}
>
    <YourComponent/>
</div>

Solution 5

The @Nadun's version did not work for me, sizing wasn't working well. Removed the direction="column" or changing it to row, helps with building vertical login forms with responsive sizing.

<Grid
  container
  spacing={0}
  alignItems="center"
  justify="center"
  style={{ minHeight: "100vh" }}
>
  <Grid item xs={6}></Grid>
</Grid>;

View more solutions

Comments

[zorro]

Thanks, so I have use 3 Grid items and put the component in the middle to center it?

[Peter Moses]

A little correction, for the Op's use case, the flex direction should be row>>> direction="row"

[Slim]

Normally, alignItems=center and justify=center puts the component in the center of the page but it's not the case. Adding the style={{ minHeight: '100vh' }} does the job but it adds a scrolling bar in the page. How it will be fixed?

[Michael Jay]

This worked very well for me for centering a Material-UI <Fab> component. As an add-on, in the translate method, the first parameter is the horizontal translation and the second is the vertical translation.

[Nicolás Apolonia]

This solution has a problem, it will shorten the size of the component by 50% in width and height

[Rajkumar M]

Thanks. After hours or searching, finally this is the one that helped me to achieve FormLabel and TextField side by side in the same row.

[Killian Huyghe]

Although this works, using a Grid container without a Grid item is an undocumented behaviour and may break anytime (though it probably won't).

[willnode]

@Slim set CSS body margin:0

[Admin]

Please add further details to expand on your answer, such as working code or documentation citations.

[ogg130]

this is my favorite answer, good technique

[asologor]

It's justifyContent="center" instead of justify="center" as of MUI v5

[Brayan Loayza]

Gracias campeon...!

[chipimix]

in mui v5 it would be justifyContent = "center"

[claptimes]

I was missing setting the minHeight

[ViktorMS]

This does not answer OP's question