Material UI：实现网格中复选框居中，不受标签长度影响

要让复选框组整体自适应居中且不破坏垂直对齐，只需调整外层Grid容器的布局属性，无需修改Grid item或硬编码CSS：

• 给外层Grid container添加justifyContent="center"属性，让整个网格内容在容器内水平居中，解决左右边距不均的问题
• 可选：通过sx给容器添加响应式内边距，进一步优化不同屏幕下的边距表现

修改后的完整代码 #

<Box display="flex" flexDirection="column" alignItems="center" mt={2}>
      <Grid container spacing={1} justifyContent="center" sx={{ px: { xs: 2, sm: 3, md: 4 } }}>
        {playlists.map((playlist) => (
          <Grid item lg={4} md={6} sm={6} xs={12} key={playlist?.id}>
            <FormControlLabel
              control={<Checkbox checked={true} />}
              label={playlist?.name}
            />
          </Grid>
        ))}
      </Grid>
      <TextField
        name="comment"
        label="Comment"
        multiline
        sx={{ width: isLarge ? "80%" : "45%" }}
        margin="normal"
        color="secondary"
        InputProps={{
          startAdornment: (
            <InputAdornment position="start">
              <AddCommentIcon />
            </InputAdornment>
          ),
        }}
      />
      <Button
        variant="contained"
        disableElevation
        color="secondary"
        startIcon={<VideoCallIcon />}
        sx={{ mt: 2, width: isLarge ? "80%" : "45%" }}
      >
        Upload Video
      </Button>
</Box>

原理说明 #

• justifyContent="center"是Material UI Grid容器的原生布局属性，会让所有网格项在水平方向上居中排列，同时保留每个Grid item的原始宽度和内部元素的垂直对齐（不会破坏FormControlLabel的复选框与标签对齐）
• 响应式内边距px: { xs: 2, sm: 3, md: 4 }会根据屏幕尺寸自动调整容器左右内边距，避免小屏幕下内容贴边，实现完全自适应

内容的提问来源于stack exchange，提问作者Adventure-Knorrig