如何在 MUI Grid 项目中水平居中项目？

Question

如何在 MUI Grid 项目中居中元素？这是我的 React 应用程序中的一个 sn-p：

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

我尝试应用alignContent、justify、alignItems（对父<Grid item>）没有成功。

我认为这会很简单，但我没有找到任何关于在网格项目中居中项目的信息。

Answer 1

在MUI v5中，根据migration guide，Grid的justify属性被重命名为justifyContent以与CSS属性名称对齐：

<Grid container justifyContent="center" alignItems="center">

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`

Answer 3

这是正确的方法：

<Grid container item xs={4} justify="center">

如果容器属性设置为 true，组件将具有 flex 容器行为。

Grid API

Answer 4

两秒钟后...我通过一些简单的 CSS 解决了这个问题：

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

如果有另一种方法更“正确”，请随时发布另一个答案。