使用DOM在flexbox列内将div动态居中居中[重复]

我知道这可能很简单，但是我已经不屑一顾了。如何将div放在此处居中？

（这只是从代码中提取的内容，因此乍一看可能有点奇怪，因为它缺少表单内的内容）

我只想要屏幕看起来像下面的样子

______________________
|                     |
|                     |
|        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>
           );
       }
    }

谢谢！