Reactjs 在材质UI中是否有一个道具可以将网格中的所有内容居中？

我正在学习使用材料用户界面，我不能想出一些应该是容易的

根据下面的卡片

我想使所有内容居中，但abcd、efgh、ijkl行除外。 这是我想要的最终结果：

这是代码：

   <Grid container spacing={4}  >
      <Grid item xs={12} sm={6} md={4}>
        <Card style={{ padding: '30px 40px 20px'}} >
          <CardContent>
            <Typography variant="h4" color="textSecondary" >
              TEST
            </Typography>
            <Typography color="textSecondary">Something in here</Typography>
            <Divider />
            <Grid container justify={'space-between'}>
              <Typography item color="textSecondary">
                abcd
              </Typography>
              <Typography item color="textSecondary">
                25
              </Typography>
            </Grid>
            <Grid container justify={'space-between'}>
              <Typography color="textSecondary">efgh</Typography>
              <Typography color="textSecondary">15</Typography>
            </Grid>
            <Grid container justify={'space-between'}>
              <Typography color="textSecondary">ijkl</Typography>
              <Typography color="textSecondary">05</Typography>
            </Grid>
          </CardContent>
          <CardActions disableSpacing>
            <Button variant="contained" color="primary">
              Action 1
            </Button>
            <Button variant="contained" color="primary">
              Action 2
            </Button>
          </CardActions>
        </Card>
      </Grid>
    </Grid>

试验
这里有东西
abcd
25
efgh
15
ijkl
05
行动1
行动2

我可以通过给

Typograhy

元素a

style={{{textAlign:'center'}}}

和

CardActions

a

style={{display:'flex'，justifyContent:'spacebetween'}

得到结果，但我想知道是否有更好的方法，就像一个给网格容器的MUI道具，它告诉你把里面的所有东西居中对齐。 我试着给网格一个“中心”，但它什么也没做