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

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

Answers (15)

Elyas Mehraein

Reputation: 1

<Box display={"inline-block"}> worked for me

Upvotes: -1

Java wanna bee

Reputation: 3109

I use the Container component, which centers the content horizontally automatically. Notice the CssBaseline component which helps to kickstart an consistent, and simple baseline to build upon.

To determine the maxWidth of the container you can use one of the Breakpoints: 'xs' | 'sm' | 'md' | 'lg' | 'xl'

import { Grid, Box, Container, CssBaseline } from '@mui/material';

const Foo = () => {
  return (
    <>
      <CssBaseline />
      <Container maxWidth='sm'>
        <Grid item>
          <Box sx={{ backgroundColor: 'green' }}>green</Box>
          <Box sx={{ backgroundColor: 'grey' }}>grey</Box>
        </Grid>

        <Grid item>
          <Box sx={{ backgroundColor: 'orange' }}>orange</Box>
        </Grid>
      </Container>
    </>
  );
};

export default Foo;

Upvotes: 0

NearHuscarl

Reputation: 81430

If you just need to center a couple of items in a row or column in Material UI 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

Upvotes: 15

Nadun

Reputation: 7853

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.

Upvotes: 452

hasharnashar

Reputation: 317

Image: MUI Grid interactive demo

The interactive grid demo on the grid component page on MUI website (https://mui.com/material-ui/react-grid/) is really easy to use for any configuration that one needs as it shows visually what it will do with what setting, basically a bunch of radio buttons to get what you want.

Upvotes: 0

Killian Huyghe

Reputation: 1624

You can do this with the Box component:

import Box from "@mui/material/Box";

...

<Box
  display="flex"
  justifyContent="center"
  alignItems="center"
  minHeight="100vh"
>
  <YourComponent/>
</Box>

Upvotes: 91

Yahya Aghdam

Reputation: 569

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>
    );
}

Upvotes: 2

teranshil

Reputation: 177

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>

Upvotes: 0

Simranjeet Kaur

Reputation: 1

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

Upvotes: -2

Steffano Festa

Reputation: 56

Little update 07-09-2021 'justify' is now 'justifyContent="center"'

https://material-ui.com/components/grid/

Upvotes: 0

bikram

Reputation: 7955

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>

Upvotes: 7

Onur Yıldırım

Reputation: 371

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

Upvotes: 14

Jöcker

Reputation: 6758

Here is another option without a grid:

<div
    style={{
        position: 'absolute', 
        left: '50%', 
        top: '50%',
        transform: 'translate(-50%, -50%)'
    }}
>
    <YourComponent/>
</div>

Upvotes: 22

Max

Reputation: 990

Another option is:

<Grid container justify = "center">
  <Your centered component/>
</Grid>

Upvotes: 65

Gavin Thomas

Reputation: 1867

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/

Upvotes: 5

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

Answers (15)

Live Demo

Related Questions