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

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)?

Answer 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.
Update on 2022-06-06
In addition to that, another new and better approach will be using the Box component.
<Box
display="flex"
justifyContent="center"
alignItems="center"
minHeight="100vh"
>
<YourComponent/>
</Box>
This was originally posted by Killian Huyghe as another answer.
Hope this will help you.

Answer 2

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>

Answer 3

Another option is:
<Grid container justify = "center">
<Your centered component/>
</Grid>

Answer 4

Here is another option without a grid:
<div
style={{
position: 'absolute',
left: '50%',
top: '50%',
transform: 'translate(-50%, -50%)'
}}
>
<YourComponent/>
</div>

Answer 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>;

Answer 6

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

Answer 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>

Answer 8

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/

Answer 9

Little update 07-09-2021 'justify' is now 'justifyContent="center"'
https://material-ui.com/components/grid/

Answer 10

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>

Answer 11

You can make this component and use it everywhere you want. also you can add your props:
import Box from '#mui/material/Box';
export default function Center(props: any) {
const { children } = props
return (
<Box
sx={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'column'
}}
{...props}
>
{children}
</Box>
);
}

Answer 12

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