Center grid items within a MUI grid-CodePudding

I am really struggling I've tried everything like adding justifyContent:'center' but it will not move. I am using MUI grid and I'm trying on a section to have 1 row with two columns. But for some reasons items within their columns are not centered. Code and screenshot below: Section.js

import React from 'react';
import SignUpCard from './SignUpCard';
import bg1 from '../../assets/bg1.png';
import { Container, Grid, Typography, Box, Button } from '@mui/material';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';

const theme = createTheme();

function TopSection() {

  return (
    <section style={backgroundStyle}>
    <ThemeProvider theme={theme}>
      <CssBaseline />
        <Container sx={{height:'100vh', py: 8}} maxWidth="lg">
          <Grid container alignItems={'center'}>
            <Grid item sm='12' lg='6' xs='12'>
              <Typography sx={{ textAlign: 'center' }} variant='h3'>FAITES LE PREMIER <br /> PAS A 2</Typography>
              <SignUpCard />
            </Grid>
            <Grid item sm='12' lg='6' xs='12'>
              <img src={bg1} style={{ width: '100%' }} />
            </Grid>
          </Grid>
        </Container>
    </ThemeProvider>
    </section>
  );
}

export default TopSection

The signup card I am using:

export default function SignUpCard() {
  return (
    <Card sx={{width: 300, height: 400 }}>
      <CardContent>
        <Typography sx={{ fontSize: 16 }} color="text.black" gutterBottom>
          Son Prénom
        </Typography>
        <TextField fullWidth id="outlined-basic" variant="filled" />
        <Typography sx={{ mb: 1.5 }} color="text.black" gutterBottom>
          Son numéro de téléphone 
        </Typography>
        <TextField fullWidth id="outlined-basic" variant="filled" />
        <Typography color='text.secondary' gutterBottom>
          Si cette personne utilise le site et qu'elle t'aime également alors vous serez
          mutuellement prévenus ! 
        </Typography>
      </CardContent>
      <CardActions>
        <Button sx={{backgroundColor:'#ff5252', ':hover' : {backgroundColor:'#ff5252'}}} variant="contained" size="small">Se lancer!</Button>
      </CardActions>
    </Card>
  );
}

On this screenshot you can see that the text is centered but not the card below. I want the card to be centered as well

CodePudding user response：

You can use the Flexbox model on the parent .MuiGrid-item of the text and the card. First add a class to the parent to override and customize the styles:

  //TopSection.js
    <Grid item sm="12" lg="6" xs="12" className="wrapper">
      <Typography sx={{ textAlign: "center" }} variant="h3">
        FAITES LE PREMIER <br /> PAS A 2
      </Typography>
      <SignUpCard />
    </Grid>

and for your css:

.MuiGrid-item.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

I have added a .wrapper class to override the default flex-direction: raw; that matrial-ui is applying to .MuiGrid-item

Here is a working example: https://codesandbox.io/embed/great-swirles-jk7on2?fontsize=14&hidenavigation=1&theme=dark