如何在Material UI的Drawer侧边栏组件中实现子元素垂直居中？

你设置的alignItems: "center"仅控制水平方向对齐，无法实现垂直居中是因为Material UI的Drawer组件的paper容器默认采用flex-direction: column布局，垂直方向为主轴，需要配置主轴对齐属性才能实现垂直方向的居中效果。

修改方案非常简单，只需要调整drawerPaper样式，新增justifyContent: "center"属性即可，修改后的相关样式代码如下：

const useStyles = makeStyles((theme) => ({
  // 其余原有样式保持不变
  drawerPaper: {
    width: drawerWidth,
    backgroundColor: "rgb(50, 50 ,50)",
    alignItems: "center",
    // 新增如下属性控制垂直主轴方向的内容居中
    justifyContent: "center"
  },
  // 如果你需要菜单项文字和Avatar视觉对齐，可调整listItem的justifyContent属性
  listItem: {
    color: "white",
    display: "flex",
    // 把原本的flex-end改为center即可让菜单项文字居中
    justifyContent: "center",
    textAlign: "center",
  },
}));

修改完成后，Drawer内的Avatar和所有菜单项就会整体在容器中垂直居中。

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