reactjsauthenticationmobilematerial-uidesktop

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


I don't quite understand the 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

  • Since you are going to use this on a login page. Here is a code I used in a Login page using Material UI

    Material UI v5

    <Grid
      container
      spacing={0}
      direction="column"
      alignItems="center"
      justifyContent="center"
      sx={{ minHeight: '100vh' }}
    >
      <Grid item xs={3}>
        <LoginForm />
      </Grid>
    </Grid>
    

    Material UI 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 Material UI v4 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.