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)?
11 Answers
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.
-
2A little correction, for the Op's use case, the flex direction should be row>>> direction="row" May 20, 2019 at 0:14
-
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?– SlimFeb 29, 2020 at 17:32
-
1
-
4It's justifyContent="center" instead of justify="center" as of MUI v5– asologorOct 5, 2021 at 16:02
-
1@ViktorMS sorry for the confusion. But Box wasn't even an option back in 2018, however, I admit that this should have been updated, so I updated the answer. Thanks for pointing this out.– NadunJun 5 at 20:44
Another option is:
<Grid container justify = "center">
<Your centered component/>
</Grid>
-
1Although this works, using a Grid container without a Grid item is an undocumented behaviour and may break anytime (though it probably won't). Jun 8, 2021 at 12:57
-
1
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>
-
1
-
-
Here is another option without a grid:
<div
style={{
position: 'absolute',
left: '50%',
top: '50%',
transform: 'translate(-50%, -50%)'
}}
>
<YourComponent/>
</div>
-
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. Sep 18, 2020 at 1:15
-
This solution has a problem, it will shorten the size of the component by 50% in width and height Nov 30, 2020 at 14:56
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>;
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.
-
Thanks, so I have use 3 Grid items and put the component in the middle to center it?– zorroJun 8, 2018 at 19:47
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>
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
Little update 07-09-2021 'justify' is now 'justifyContent="center"'
-
Please add further details to expand on your answer, such as working code or documentation citations.– Community BotSep 7, 2021 at 13:36
-
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>