如何使用Material-UI Grid实现组件对齐与文本居中的指定布局

我想用Material-UI实现目标布局：左侧区域包含标题和Component A，中间是高度更高的容器且内部文字垂直水平居中，右侧的Component C需与左侧Component A顶部对齐。当前代码实现后右侧Component C与左侧标题对齐，中间文字也未居中，以下是调整方案：

1. 对齐Component C与Component A #

右侧Grid需和左侧结构保持对称，增加一个空占位项对应左侧标题区域，让Component C自然与Component A顶部对齐：

<Grid container item xs={4} spacing={2}>
  <Grid item xs={12}>
    {/* 空占位，匹配左侧Heading的高度 */}
  </Grid>
  <Grid item xs={12}>
    <Paper style={{ height: 400 }}>Component C</Paper>
  </Grid>
</Grid>

2. 实现中间区域文字垂直水平居中 #

给中间的Paper添加弹性布局样式，让内部文字居中：

<Paper style={{ 
  height: 440,
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'center',
  alignItems: 'center'
}}>
  <Typography>Center Text </Typography>
  <Typography>Center Text 1 </Typography>
  <Typography>Center Text 2 </Typography>
</Paper>

完整修改后代码 #

<Grid
  container
  spacing={2}
  direction="row"
  justify="flex-start"
  alignItems="flex-start"
>
  <Grid container item xs={4} spacing={2}>
    <Grid item xs={12}>
      <Typography>Heading </Typography>
    </Grid>
    <Grid item xs={12}>
      <Paper style={{ height: 400 }}>Component A</Paper>
    </Grid>
  </Grid>
  <Grid container item xs={4} spacing={1}>
    <Grid item xs={12}>
      <Paper style={{ 
        height: 440,
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center'
      }}>
        <Typography>Center Text </Typography>
        <Typography>Center Text 1 </Typography>
        <Typography>Center Text 2 </Typography>
      </Paper>
    </Grid> 
  </Grid>
  <Grid container item xs={4} spacing={2}>
    <Grid item xs={12}></Grid>
    <Grid item xs={12}>
      <Paper style={{ height: 400 }}>Component C</Paper>
    </Grid>
  </Grid>
</Grid>

调整后即可实现：Component C与Component A顶部对齐，中间区域文字垂直水平居中的预期布局。

内容的提问来源于stack exchange，提问作者Neha Chaudhary