How to centre Material-UI Grid Components

Question

This post has been resolved

Hi, I'm using Material-UI in my React App, and I want to centre a Grid item that contains a Card and two more Grid items. Here is the relevant code. The Cards do appear in the middle of the screen, but they aren't centred and it's really, really annoying me.

Screenshot:

Necessary code:

render() {
    return (
      <Grid container>
        <Grid item xs={12}>
          <Typography variant="h3" gutterBottom>
            My Projects
          </Typography>
        </Grid>
        <Grid item xs={6} justify="center">
          <Grid item xs={12}>
            <Card>
              <CardMedia
                component="img"
                height="140"
                image="https://github.com/dbarnes18/Portfolio/blob/master/assets/images/spotter.png?raw=true"
                alt="Spotter"
              />
              <CardContent>
                <Typography gutterBottom variant="h5" component="div">
                  Spotter
                </Typography>
                <Typography variant="body2" color="text.secondary">
                  Spotter is an easy-to-use Spotify music controller with
                  functioning room and voting systems.
                </Typography>
              </CardContent>
              <CardActions>
                <Button
                  size="small"
                  color="primary"
                  to="/project/spotter"
                  component={Link}
                >
                  Read More
                </Button>
              </CardActions>
            </Card>
          </Grid>
          <Grid item xs={12}>
            <br />
          </Grid>
          <Grid item xs={12}>
            <Card>
              <CardMedia
                component="img"
                height="140"
                image="https://github.com/dbarnes18/Portfolio/blob/master/assets/images/impulse.png?raw=true"
                alt="Spotter"
              />
              <CardContent>
                <Typography gutterBottom variant="h5" component="div">
                  Impulse
                </Typography>
                <Typography variant="body2" color="text.secondary">
                  Impulse is a macOS Virtual/Voice Assistant!{" "}
                  <i>Impulse is a little buggy and slow.</i>
                </Typography>
              </CardContent>
              <CardActions>
                <Button
                  size="small"
                  color="primary"
                  to="/project/impulse"
                  component={Link}
                >
                  Read More
                </Button>
              </CardActions>
            </Card>
          </Grid>
        </Grid>
      </Grid>
    );
  }

Some system info:

Google Chrome: 93.0.4577.82 (Official Build) (x86_64)
Revision: e3a25d9b9e2d0b728e045ec87c0aa4942aa46e4e-refs/branch-heads/4577@{#1237}
OS: macOS Version 10.15.7 (Build 19H1417)
JavaScript: V8 9.3.345.19

Thanks!

Answer 1

The simpliest answer it's to a div with name of .container and give it width:100% and display:flex;justify-content:center;gap:20px and that's it.

here preview : https://codesandbox.io/s/vigilant-bird-ulpvm?file=/index.html

Answer 2

As you say using material-ui

just add style to your code

material-ui v4.12.3

import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(() => ({
  root: {
    display: "flex",
    justifyContent: "center",
    alignItem: "center"
  }
}));

and add it to your Grid

export default function App() {
  const classes = useStyles();
  return (
    <Grid container className={classes.root}>
           ....
)}

check out here