使用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>
           );
       }
    }

谢谢!

评论
  • Ben
    Ben 回复

    在flexbox内部,您需要两个CSS属性来使元素居中。一个用于flexbox轴,另一个用于另一个轴:

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