MUI中Paper组件内元素仅水平居中，垂直居中失效求助

你的问题出在Box组件未设置高度：Paper已经设置了height: '100%'，但Box默认高度仅包裹内容，没有占满Paper的垂直空间，导致alignItems='center'的垂直居中逻辑没有生效空间。

以下是两种可行的修复方案：

方案一：给Box设置100%高度 #

让Box占满Paper的垂直空间，flex布局的垂直居中即可生效：

<Paper
    elevation={2}
    sx={{
        minWidth: '30%', // 修正原代码中多写的一个%符号
        height: '100%',
    }}
>
    <Box
        display='flex'
        justifyContent='center'
        alignItems='center'
        sx={{ height: '100%' }} // 新增高度设置
    >
        <Typography>0</Typography>
    </Box>
</Paper>

方案二：直接在Paper上应用flex布局 #

省去额外的Box层，直接在Paper上配置flex属性：

<Paper
    elevation={2}
    sx={{
        minWidth: '30%',
        height: '100%',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
    }}
>
    <Typography>0</Typography>
</Paper>

额外注意 #

原代码中minWidth: '30%%'多了一个百分号，属于无效样式，必须修正为30%才能保证宽度设置生效。

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