React如何垂直对齐组件

我的登录页面中有React组件,我想垂直对齐它们。我面临的问题是,一个组件(HowItWorks)当前与CarouselComponent水平对齐。我尝试将它们放在单独的div中,但没有完成任何操作。

Home.js

return (
        <div class="flexbox-container">
            <h1 class='tc'>{'Citizen Science for Kids!'}</h1>
            <div className='tc'>
                    <button onClick={() => history.push('/projects')} className='w-30 grow f4 link ph3 pv2 dib white bg-light-green center'>View Projects</button>
            </div>
            <br/>
                <CarouselComponent />
                <HowItWorks />
        </div>
    );

Home.css

@import url('https://fonts.googleapis.com/css?family=Chewy&display=swap');
h1 {
  font-family: "Chewy", cursive;
  font-size: 5.5rem;
}

.flexbox-container {
  display: grid;
  flex-direction: column;
  flex: 1;
}

HowItWorks.js

const useStyles = makeStyles({
  root: {
    maxWidth: 345,
  },
  media: {
    height: 140,
  },
});

function ProcessCard() {
  const classes = useStyles();

  return (
    <Card className={classes.root}>
      <CardActionArea>
        <CardMedia
          className={classes.media}
          image="/assets/images/kid-bug.jpg"
          title="Kid Bug"
        />
        <CardContent>
          <Typography gutterBottom variant="h5" component="h2">
            Record Your Observations
          </Typography>
          <Typography variant="body2" color="textSecondary" component="p">
            Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging
            across all continents except Antarctica
          </Typography>
        </CardContent>
      </CardActionArea>
      <CardActions>
        <Button size="small" color="primary">
          Share
        </Button>
        <Button size="small" color="primary">
          Learn More
        </Button>
      </CardActions>
    </Card>
  );
}

export default ProcessCard;

screenshot