css - How to center grid elements in a container MUI?

Question

The following is the code snippet which I am trying to implement.

<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>

for projectSelection class

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

If there is another component inside container such as h1 tag, properties as defined under projectSelection class are working but why they are failing with grid?

question from:https://stackoverflow.com/questions/65545604/how-to-center-grid-elements-in-a-container-mui

Answer 1

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