材料UI-不能将内容垂直居中

Question

我可以通过在父元素上执行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',
},

Answer 1

您的内容已经居中。它们位于其父对象(即外部长方体(的中心。外盒没有高度属性，因此它将占据刚好足以覆盖其内容的高度空间
因此，您的弹性容器需要具有高度属性：

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',
},