I've been trying so many things to figure out how to center a material ui card in react. Please help me! Thanks :)

website image

<Grid container justify="center">
                        <Card sx={{ maxWidth: 345}} display="flex" alignItems="center"justifyContent="center">
                        
                        <CardMedia
                               
                                      component="img"
                                      height="140"
                                      image="astroline-white_betterq.png"
                                      alt="astroline banner"
                        />
                        
                        <CardContent>
                        <Typography gutterBottom variant="h5" component="div">
                        
                        </Typography>
                        <Typography variant="body2" color="text.secondary">
                        Astroline is a space / scifi game about a apocalyptic disaster that happened on Earth.
                        </Typography>
                        </CardContent>
                        <CardActions>
                        <Button size="small" elevation="1" onClick={() => navigate("/astroline")}>Learn More
                        </Button>

                        </CardActions>
                        </Card>
                 </Grid>

CodePudding user response：

In your Grid content element add this

<Grid container justifyContent="center" >

Here is a codesandbox

<Grid container justifyContent="center" >
  <Card
    sx={{ maxWidth: 345 }}
    display="flex"
    alignItems="center"
    justifyContent="center"
  >
    <CardMedia
      component="img"
      height="140"
      image="astroline-white_betterq.png"
      alt="astroline banner"
    />

    <CardContent>
      <Typography gutterBottom variant="h5" component="div"></Typography>
      <Typography variant="body2" color="text.secondary">
        Astroline is a space / scifi game about a apocalyptic disaster that
        happened on Earth.
      </Typography>
    </CardContent>
    <CardActions>
      <Button
        size="small"
        elevation="1"
        onClick={() => navigate("/astroline")}
      >
        Learn More
      </Button>
    </CardActions>
  </Card>
</Grid>

Or you can replace the Grid with a Stack component which will wrap your Card

<Stack alignItems="center">... Your <Card> content ... </Stack

CodePudding user response：

The quickest way would be to flex the parent. Add the following to the parent element:

.parent-element-class {
    display: flex;
    justify-content: center;
}

Alternatively, you can assign a class to the MUI card and do the usual

.mui-card-root-class-name {
  margin: 0 auto;
}

div centering approach. How exactly to do this depends on how you use MUI so share some code.

You can use Wrappers such as:

https://mui.com/material-ui/react-grid/ or https://mui.com/material-ui/react-stack/

Mui's documentation is actually really good.

EDIT: Try adding width: 100% to the parent, it should center it then.