Dynamically centering a div vertically inside a flexbox column using DOM

Question

I know this may be very simple but this one has gone right over my head. How do I center the div here?

(this is just an extract from the code so it may seem a bit weird on first sight as it is missing the content inside the form)

all I want is for the screen to look like the below

______________________
|                     |
|                     |
|        DIV          |
|                     |
|                     |
-----------------------

    const styles = {
        form          : {
            textAlign  : "center",
            alignItems : "stretch"
        },
        formBoxHolder : {
            position : "relative"
        }
    }


    render() {
        const { classes } = this.props;
        const { errors, loading } = this.state;

        return (
                <Grid container className={classes.form}>
                  <Grid item sm />
                  <Grid item sm>
                  <div className={classes.formBoxHolder}>
                      <Typography className={classes.pageTitle}>
                          Login
                      </Typography>
                      <form>
                      //some content
                      </form>
                  </div>
                  </Grid>
                  <Grid item sm />
              </Grid>
           );
       }
    }

Thank you!

score -1 · Answer 1 · answered Apr 08 '20 at 21:21

Inside flexbox, you need two CSS properties to make an element centered. One for flexbox axis and one for another axis:

.flexbox {
    align-items: center; /* centers along the flexbox axis */
    justify-content: center; /* centers along another axis */
}

Dynamically centering a div vertically inside a flexbox column using DOM

1 Answers1