How to center a button in Material-UI

Question

I couldn't figure out how to center buttons in Material-UI. This is the code I have:

function BigCard(props) {
    const { classes } = props;
    return (
    <div>
        <Card className={classes.card}>
        <CardContent>
            <Typography variant="display1" className={classes.title}>
            Start Funding!
            </Typography>
        </CardContent>
        <CardActions >
            <Button size="small" color="primary" className={classes.actions}>
            Share
            </Button>
            <Button size="small" color="primary">
            Learn More
            </Button>
        </CardActions>
      </Card>
    </div>
  );

How can I center my button?

Solution 1

You can use Box element

<Box textAlign='center'>
  <Button variant='contained'>
     My button
  </Button>
</Box>

Solution 2

you could use the override with classes in the material ui doc,

FIRST WAY

You can do something like :

//Add your justify css in your styles const
const styles = {
    ...
    root: {
        justifyContent: 'center'
    }
};

And use the classes props to add this to your CardActions component :

 <CardActions classes={{root: classes.root}}>

SECOND WAY (easier)

OR You can use the style directly on your component, but i advise you to train how to use classes if you're working alot with material-ui

Just do something like :

<CardActions style={{justifyContent: 'center'}}>

Solution 3

For use cases that avoid defining css

<Grid container justify="center">
  {props.children}
</Grid>

Solution 4

Here is how I did it with Material - UI

import {Typography, Button} from '@material-ui/core';

 <Typography align='center'>
    <Button
      color='primary'
      size='large'
      type='submit'
      variant='contained'
     >
      Sign Up
    </Button>
  </Typography>

Solution 5

Quick and dirty:

<Button style={{margin: '0 auto', display: "flex"}}>
  NEXT
</Button>

View more solutions

Comments

[MUlferts]

Add code as text instead of images. Also, try to add a minimal verifiable example: stackoverflow.com/help/mcve

[ogg130]

Tried all of the above and none of it worked but this!

[joekevinrayan96]

I was working it with Grid material ui. Added <Grid display="flex" justifyContent="center"> and only with both those properties defined it worked.