title: Material UI card will not center. React JS
body: <p>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:</p>
  
  <pre><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 (
        &lt;div className={classes.header} style={{
          justify: 'center',
          alignContent: 'center',
          alignItems: 'center'
        }}&gt;
      &lt;Card className={classes.card} style={{
          justify: 'center',
          alignContent: 'center',
          alignItems: 'center'
        }}&gt;
        &lt;CardActionArea&gt;
          &lt;CardMedia
            className={classes.media}
            image={reactImage}
            title="Contemplative Reptile"
          /&gt;
          &lt;CardContent&gt;
            &lt;Typography gutterBottom variant="h5" component="h2" className={classes.font}&gt;
              Welcome to the KB
            &lt;/Typography&gt;
            &lt;Typography component="p" className={classes.font}&gt;
              Check out the tutorial for the Djanog/React boilerplate used to make this site!
            &lt;/Typography&gt;
          &lt;/CardContent&gt;
        &lt;/CardActionArea&gt;
        &lt;CardActions&gt;
          &lt;Button size="small" color="primary"&gt;
            Learn More
          &lt;/Button&gt;
        &lt;/CardActions&gt;
      &lt;/Card&gt;
      &lt;/div&gt;
    );
  }
  
  MediaCard.propTypes = {
    classes: PropTypes.object.isRequired,
  };
  
  export default withStyles(styles)(MediaCard);
  </code></pre>