如何在Material-UI的Grid item组件中垂直居中对齐Chip组件

问题根因 #

你当前的Grid容器仅配置了水平居中规则，没有设置垂直方向的对齐逻辑，同时承载Chip的Grid子项默认采用流式布局，内部内容会自动顶部对齐，当左侧ChatContent的高度随消息预览内容变化时，右侧Chip的位置就会偏离垂直中心。

具体修改步骤 #

步骤1：给外层Grid容器添加垂直居中属性 #

MUI的Grid容器默认不会做垂直方向的内容对齐，你需要给Grid container加上alignItems="center"属性，让整行的子项都基于容器垂直居中对齐。

注：如果你使用的是MUI v5版本，原来的justify属性要替换为justifyContent，alignItems属性保留即可。

步骤2：给承载Chip的Grid子项添加内部对齐规则 #

给xs=2的Grid子项配置flex布局，让内部的Chip本身也实现垂直居中，你可以直接通过Grid的内置属性配置，不需要额外写自定义样式。

修改后的核心代码 #

const styles = {
  root: {
    borderRadius: 8,
    height: 80,
    boxShadow: "0 2px 10px 0 rgba(88,133,196,0.05)",
    marginBottom: 10,
    display: "flex",
    alignItems: "center",
    "&:hover": {
      cursor: "grab",
    },
  },
  // 可选：如果仍有细微偏移可以加这个chip样式兜底
  chip: {
    alignSelf: "center"
  }
};

<Box
  onClick={() => this.handleClick(this.props.conversation)}
  className={classes.root} 
>
  <BadgeAvatar
    photoUrl={otherUser.photoUrl}
    username={otherUser.username}
    online={otherUser.online}
    sidebar={true}
  />
  {/* 这里添加alignItems="center" */}
  <Grid container justify="center" alignItems="center">
    <Grid item xs={10}>
      <ChatContent conversation={this.props.conversation} />
    </Grid>
    {/* 这里添加display、对齐属性，让Chip垂直+水平靠右对齐 */}
    <Grid item xs={2} display="flex" justifyContent="flex-end" alignItems="center">
      <Chip label="23" size="small" color="primary" className={classes.chip} />
    </Grid>
  </Grid>
</Box>

额外排查项 #

如果修改后仍然有细微偏移，可以检查ChatContent组件是否自带上下margin/padding，如果有可以给ChatContent外层包一层div，加上display: flex;align-items: center;属性即可。

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