I've been struggling to find a solution for centering a Material UI card in React. Any assistance would be greatly appreciated! Thank you :)
<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 / sci-fi game that explores an apocalyptic event on Earth.
</Typography>
</CardContent>
<CardActions>
<Button size="small" elevation="1" onClick={() => navigate("/astroline")}>Learn More
</Button>
</CardActions>
</Card>
</Grid>