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

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:^[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:^[2]

Another option is:

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

Solution 3:^[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:^[4]

Here is another option without a grid:

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

Solution 5:^[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>;

Solution 6:^[6]

All you have to do is wrap your content inside a Grid Container tag, specify the spacing, then wrap the actual content inside a Grid Item tag.

 <Grid container spacing={24}>
    <Grid item xs={8}>
      <leftHeaderContent/>
    </Grid>

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

Also, I've struggled with material grid a lot, I suggest you checkout flexbox which is built into CSS automatically and you don't need any addition packages to use. Its very easy to learn.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Solution 7:^[7]

With other answers used, xs='auto' did a trick for me.

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

    <Grid item xs='auto'>
        <GoogleLogin
            clientId={process.env.REACT_APP_GOOGLE_CLIENT_ID}
            buttonText="Log in with Google"
            onSuccess={this.handleLogin}
            onFailure={this.handleLogin}
             cookiePolicy={'single_host_origin'}
         />
    </Grid>
</Grid>

Solution 8:^[8]

If you just need to center a couple of items in a row or column in MUI v5, you can use Stack instead of Grid:

<Stack alignItems="center">
  <Item>Item 1</Item>
  <Item>Item 2</Item>
  <Item>Item 3</Item>
</Stack>

Another example with row direction:

<Stack direction="row" justifyContent="center">
  <Item>Item 1</Item>
  <Item>Item 2</Item>
  <Item>Item 3</Item>
</Stack>

Live Demo

Solution 9:^[9]

Little update 07-09-2021 'justify' is now 'justifyContent="center"'

https://material-ui.com/components/grid/

Solution 10:^[10]

just do style={{display:'flex';justifyContent:'center';alignItems:'center'}}

Solution 11:^[11]

The most versatile solution for me is using container and item props in combination.

The container and item props are two independent booleans; they can be combined to allow a Grid component to be both a flex container and child.

Grid MUI documentation - https://mui.com/material-ui/react-grid/#responsive-values

<Grid container alignContent={'center'} xs={12}>
  <Grid container item xs={6} justifyContent={'start'}> 
    <span> content one </span> 
  </Grid>
  <Grid container item xs={6} justifyContent={'center'}> 
    <span> content two </span>
  </Grid>
</Grid>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Max
Solution 3	Killian Huyghe
Solution 4	JÃ¶cker
Solution 5	Domagoj VukoviÄ‡
Solution 6	Gavin Thomas
Solution 7	bikram
Solution 8	NearHuscarl
Solution 9	Steffano Festa
Solution 10	sta
Solution 11	teranshil

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

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]