How to horizontally center an item in MUI Grid item?

Question

How do I center elements inside a MUI Grid item? Here is a snippet from my React application:

<Grid container>   <Grid item xs={4}>     // Unrelated stuff here   </Grid>   <Grid item xs={4}>     // How do I centre these items?     <IconButton className={classes.menuButton} color="inherit">       <EditIcon/>     </IconButton>     <IconButton className={classes.menuButton} color="inherit">       <CheckBoxIcon/>     </IconButton>   </Grid>   <Grid item xs={4}>     // Unrelated stuff here   </Grid> </Grid> 

I've tried applying alignContent, justify, alignItems (to the parent <Grid item>) with no success.

I thought this would be quite simple, but I've failed to find any information on centering items inside of grid items.

Answer 1

Two seconds later... I solved this through some simple CSS:

<Grid item xs={4} style={{textAlign: "center"}}> </Grid> 

If there is another approach that is somehow more "correct", please feel free to post another answer.

Answer 2

 <Grid container  className = {classes.root} align = "center" justify = "center" alignItems = "center"  >             <CssBaseline/>             <Grid item xs = {false} sm = {4} md = {6}>              </Grid>             <Grid item xs = {12} sm = {4} md = {6}>              </Grid>         </Grid>`enter code here`