Material UI card will not center. React JS

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

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%",
  ...

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.