Material UI card will not center. React JS

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