Material UI - 无法垂直居中内容答案

【问题标题】：Material UI - cannot center content verticallyMaterial UI - 无法垂直居中内容
【发布时间】：2022-09-29 20:35:04
【问题描述】：

我可以通过在父元素上执行justifyContent: \'center\' 将内容水平（左右）居中。但是，alignItems: \'center\' 绝对没有任何作用，内容仍然粘在顶部，而它应该在屏幕的中心。

const DisplayQuiz = () => {
  const classes = useStyles();
  return (
    <Box className={classes.main}>
      <Box>a</Box>
      <Box>a</Box>
      <Box>a</Box>
      <Box>a</Box>
    </Box>
  )
}

main: {
  display: \'flex\',
  justifyContent: \'center\',
  alignItems: \'center\',
},

尝试给父元素高度
试过了，没有运气。我现在的解决方案只是给它一个marginTop。但我相信有更好的方法

标签： material-ui

【解决方案1】：

您的内容已经居中。它们位于其父级（即外框）的中心。外框没有高度属性，所以它会占用足够的高度空间来覆盖它的内容。
因此，您的 flex 容器需要具有 height 属性：

const DisplayQuiz = () => {
  const classes = useStyles();
  return (
    <Box className={classes.main}>
      <Box>a</Box>
      <Box>a</Box>
      <Box>a</Box>
      <Box>a</Box>
    </Box>
  );
}

main: {
  height: '100vh',
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
},

【讨论】：