Css 如何在材质UI网格项目中水平居中放置项目？

如何使材质UI网格项中的元素居中？以下是我的React应用程序的一个片段：

<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

（对父级

）应用于此，但没有成功

---

我原以为这很简单，但在网格项中找不到任何关于居中项的信息。

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

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

---

如果有其他更“正确”的方法，请随时发布其他答案。

这是正确的方法：

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

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

`在这里输入代码`

这是完全正确的，因为元素是内联的（或内联块），然后通过文本对齐完成居中。谢谢，

align=“center”

属性对我有用。为什么这不在文档上

align=“center”

完成了这项工作。这些文档对物料ui来说可能非常糟糕……align=“center”对我来说也很有用。感谢align属性不是材质UI属性。它只是HTML。它只是将

align=“center”

附加到输出HTML。

的解决方案是材质UI的正确惯用方法。

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