Material UI Grid子项居中失败求助：已尝试相关属性无效

问题根源 #

你设置的三个Grid子项xs={3}、xs={6}、xs={3}宽度总和刚好占满容器的12列，此时container上的justifyContent="center"不会产生视觉变化——因为子项已经填满了整个容器空间，没有多余空间让它们整体偏移居中。你看到的“从左侧起始排列”，本质是每个子项内部的内容左对齐，而非子项本身没居中。

方案一：保持子项占满宽度，让内部内容居中 #

给每个Grid item添加flex布局样式，使其内部内容水平垂直居中：

const HeaderCopy: React.FC = () => {
    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
    const handleMenu = (event: React.MouseEvent<HTMLElement>) => {
        setAnchorEl(event.currentTarget);
    };
    const handleClose = () => {
        setAnchorEl(null);
    };
    return (
        <AppBar>
            <Grid container alignItems="center" justifyContent="center">
                <Grid item xs={3} sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                    <img src="/public/logo.png" />
                </Grid>
                <Grid item xs={6} sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                    <Typography component="div">ALl IS WELL</Typography>
                </Grid>
                <Grid item xs={3} sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                    <IconButton
                        size="large"
                        aria-label="account of current user"
                        aria-controls="menu-appbar"
                        aria-haspopup="true"
                        onClick={handleMenu}
                        color="inherit"
                    >
                        <AccountCircle />
                    </IconButton>
                    <Menu
                        id="menu-appbar"
                        anchorEl={anchorEl}
                        anchorOrigin={{
                            vertical: "bottom",
                            horizontal: "right",
                        }}
                        keepMounted
                        transformOrigin={{
                            vertical: "top",
                            horizontal: "right",
                        }}
                        open={Boolean(anchorEl)}
                        onClose={handleClose}
                    >
                        <MenuItem>Home</MenuItem>
                        <MenuItem>My Profile</MenuItem>
                        <MenuItem>My Settings</MenuItem>
                        <MenuItem>Logout</MenuItem>
                    </Menu>
                </Grid>
            </Grid>
        </AppBar>
    );
}

方案二：让子项整体居中（不占满容器宽度） #

如果不需要子项占满整个宽度，可以去掉固定的xs值，让子项宽度由内容决定，再通过container的justifyContent="center"让整个组居中：

const HeaderCopy: React.FC = () => {
    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
    const handleMenu = (event: React.MouseEvent<HTMLElement>) => {
        setAnchorEl(event.currentTarget);
    };
    const handleClose = () => {
        setAnchorEl(null);
    };
    return (
        <AppBar>
            <Grid container alignItems="center" justifyContent="center" spacing={2}>
                <Grid item>
                    <img src="/public/logo.png" />
                </Grid>
                <Grid item>
                    <Typography component="div">ALl IS WELL</Typography>
                </Grid>
                <Grid item>
                    <IconButton
                        size="large"
                        aria-label="account of current user"
                        aria-controls="menu-appbar"
                        aria-haspopup="true"
                        onClick={handleMenu}
                        color="inherit"
                    >
                        <AccountCircle />
                    </IconButton>
                    <Menu
                        id="menu-appbar"
                        anchorEl={anchorEl}
                        anchorOrigin={{
                            vertical: "bottom",
                            horizontal: "right",
                        }}
                        keepMounted
                        transformOrigin={{
                            vertical: "top",
                            horizontal: "right",
                        }}
                        open={Boolean(anchorEl)}
                        onClose={handleClose}
                    >
                        <MenuItem>Home</MenuItem>
                        <MenuItem>My Profile</MenuItem>
                        <MenuItem>My Settings</MenuItem>
                        <MenuItem>Logout</MenuItem>
                    </Menu>
                </Grid>
            </Grid>
        </AppBar>
    );
}

这里添加了spacing={2}来给子项之间增加间距，优化布局美观度。

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