How to center a button in Material-UI - css

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?

Answer 1

You can use Box element
<Box textAlign='center'>
<Button variant='contained'>
My button
</Button>
</Box>

Answer 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'}}>

Answer 3

For use cases that avoid defining css
<Grid container justify="center">
{props.children}
</Grid>

Answer 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>

Answer 5

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

Answer 6

From MUI v5, you can apply the custom styles using the sx props. Because CardActions layout is already flex, you only need to set its justify-content to center.
Using sx instead of inline styles like the other answer help reduce the CSS specificity, and make it easier to override the CSS in the future
<CardActions sx={{ justifyContent: "center" }}>
<Button size="small">Learn More</Button>
</CardActions>
Live Demo

Answer 7

What I tried is below and is also shown in official videos of material ui on youtube.
<Grid item xs={12} sm={12} md={4} lg={4}
style={{
textAlign:'center' // this does the magic
}}
>
<Button>
NEXT
</Button>
</Grid>
Thanks and best wishes

Answer 8

You have to use two properties: display and justify-content
<CardActions display='flex' justifyContent='center'>

Answer 9

This will centre your button horizontally
<Button
size="medium"
variant="contained"
color="primary"
style={{
display: "flex",
flexDirection: "row",
justifyContent:"center",
backgroundColor: purple[500],
'&:hover': {
backgroundColor: purple[700],
},
}}
>
Get Hired
</Button>

Answer 10

The easiest way is to use a Box wrapping around the button
<Box
sx={{
display: 'flex',
flexDirection: { xs: 'column', md: 'row' },
alignItems: 'center',
justifyContent: 'center',
}}
>
<Button>Click me</Button>
</Box>

Answer 11

This may sound counter-intuitive but what worked for my case (slightly different than yours) was to use the fullWidth attribute in the Button element.
Here is my scenario (MUI v5):
<Grid container alignItems={'center'} >
<Grid item>
<Button fullWidth variant='contained' >Click Me!</Button>
</Grid>
</Grid>

Answer 12

wrap element in this center
.center{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
}