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)?
8 Answers
Since you are going to use this in a login page. Here is a code I used in a Login page using Material-UI
<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 justify = "center">
<Your centered component/>
</Grid>
However, using a Grid container without a Grid item is an undocumented behavior.
Hope this will help you.
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>;
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>
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.