How to center a ButtonGroup using Material UI? - reactjs

Question

I am trying to center a button group using Material UI in React, no matter what i do it floats to the left.
<Container>
<ButtonGroup style={{alignItems:"center"}} color="primary" aria-label="outlined primary button group">
<Button onClick={()=>{setDonation(1)}}>$1</Button>
<Button onClick={()=>{setDonation(5)}}>$5</Button>
<Button onClick={()=>{setDonation(10)}}>$10</Button>
<Button onClick={()=>{setDonation(25)}}>$25</Button>
</ButtonGroup>
</Container>
Here is a picture of the chrome inspector:

Answer 1

You can center the ButtonGroup by applying the following CSS attributes to the container.
const useStyles = makeStyles({
container: {
display: "flex",
justifyContent: "center",
},
});
const classes = useStyles();
<Container className={classes.container}>
<ButtonGroup
color="primary"
aria-label="outlined primary button group"
>
<Button>$1</Button>
<Button>$5</Button>
<Button>$10</Button>
<Button>$25</Button>
</ButtonGroup>
</Container>
There is documentation here too https://material-ui.com/styles/basics/.

Answer 2

Just found out that you can use Box component as a container with all the properties of a div container in css (At least the necesary ones)
<Box
display="flex"
flexDirection="column"
alignItems="center"
justifyContent="center"
>
<ButtonGroup style={{textAlign:"center"}} color="primary" aria-label="outlined primary button group">
<Button onClick={()=>{setDonation(1)}}>$1</Button>
<Button onClick={()=>{setDonation(5)}}>$5</Button>
<Button onClick={()=>{setDonation(10)}}>$10</Button>
<Button onClick={()=>{setDonation(25)}}>$25</Button>
</ButtonGroup>
</Box>