If you want to center a component in Material-UI and make it responsive? Since you are going to use this in a login page. Here is a code I used in a Login page using Material-UI.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <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.
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
