Material UI card will not center. React JS - reactjs

Question

Trying to use a card for the main part of my home page. However, nothing I will do will center the card, and I have tried putting justify, alignItems, alignContent, however, none of them seem to resolve the issue. I honestly have no idea what else to do to align this to the center. I don't see how it's even possible. Here is the code:
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '#material-ui/core/styles';
import Card from '#material-ui/core/Card';
import CardActionArea from '#material-ui/core/CardActionArea';
import CardActions from '#material-ui/core/CardActions';
import CardContent from '#material-ui/core/CardContent';
import CardMedia from '#material-ui/core/CardMedia';
import Button from '#material-ui/core/Button';
import Typography from '#material-ui/core/Typography';
import reactImage from '../images/djangoreact.png'
const styles = {
card: {
width: "100%",
backgroundColor: 'black',
textAlign: 'center',
justifyContent: 'center',
alignContent: 'center',
padding: '30px'
},
media: {
height: 325,
// textAlign: 'center',
// justifyContent: 'center',
// alignContent: 'center',
},
font: {
color: 'white',
// textAlign: 'center',
// justifyContent: 'center',
// alignContent: 'center',
},
header:{
textAlign: 'center',
justify: 'center',
alignContent: 'center',
width: '100%'
}
};
function MediaCard(props) {
const { classes } = props;
return (
<div className={classes.header} style={{
justify: 'center',
alignContent: 'center',
alignItems: 'center'
}}>
<Card className={classes.card} style={{
justify: 'center',
alignContent: 'center',
alignItems: 'center'
}}>
<CardActionArea>
<CardMedia
className={classes.media}
image={reactImage}
title="Contemplative Reptile"
/>
<CardContent>
<Typography gutterBottom variant="h5" component="h2" className={classes.font}>
Welcome to the KB
</Typography>
<Typography component="p" className={classes.font}>
Check out the tutorial for the Djanog/React boilerplate used to make this site!
</Typography>
</CardContent>
</CardActionArea>
<CardActions>
<Button size="small" color="primary">
Learn More
</Button>
</CardActions>
</Card>
</div>
);
}
MediaCard.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(MediaCard);

Answer 1

Use the Grid provided by material-UI
import Grid from '#material-ui/core/Grid';
// import like this
function MediaCard(props) {
const { classes } = props;
<Grid
container
spacing={0}
direction="column"
alignItems="center"
justify="center"
style={{ minHeight: '100vh' }}
>
<Grid item xs={3}>
<Card>
// card content
</Card>
</Grid>
</Grid>
}
hope this will help you.
Use this: https://material-ui.com/layout/grid/ for more info

Answer 2

Alternatively to switching to <Grid>, I put a <div> wrapper around the <CardMedia> element and used
style={{ display:'flex', justifyContent:'center' }}
on the outer <div> tag to achieve the same result.

Answer 3

I do not know what is your problem while you are setting the width of cards 100%.
I cannot see the rendered view, however, I want to recommend one of minimal solution without <Grid>.
If I were you, I would simply try:
card: {
'margin-left': '5%',
width: "90%",
...

Answer 4

use this style
const useStyles = makeStyles((theme) => ({
cardstyle:{
marginTop: theme.spacing(20),
margin:'auto',
flexDirection: 'column',
},
}));
<Card className={clasess.cardstyle}>
// card content
</Card>