如何在容器 MUI 中居中网格元素？答案

【问题标题】：How to center grid elements in a container MUI?如何在容器 MUI 中居中网格元素？
【发布时间】：2021-04-09 05:43:08
【问题描述】：

以下是我正在尝试实现的代码sn-p。

<Container className={Styles.projectSelection}>
            <Grid container item spacing={8} alignItems="center">
                <Grid item>
                    <Typography variant="h3" color="primary">
                        Projects
                    </Typography>
                </Grid>
                <Grid item>
                    <Searchbar />
                </Grid>
            </Grid>
            <Grid container item></Grid>
            <Grid container item>
                <Grid item>
                    <Button startIcon={<AddRounded />}>Create Project</Button>
                </Grid>
            </Grid>
        </Container>

对于 projectSelection 类

.projectSelection {
    display: flex !important;
    flex-direction: column;
    align-items: center;
}

如果容器内有另一个组件，例如 h1 标签，projectSelection 类下定义的属性可以正常工作，但为什么它们会因网格而失败？

【问题讨论】：

标签： css reactjs sass flexbox material-ui

【解决方案1】：

<Grid container item spacing={8} justify="center">
    <Grid item></Grid>
    <Grid item></Grid>
</Grid>

【讨论】：