使用 DOM 在 flexbox 列中动态地使 div 垂直居中 [重复]答案

【问题标题】：Dynamically centering a div vertically inside a flexbox column using DOM [duplicate]使用 DOM 在 flexbox 列中动态地使 div 垂直居中 [重复]
【发布时间】：2020-07-21 10:12:16
【问题描述】：

我知道这可能很简单，但这个问题已经超出了我的想象。如何让 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>
           );
       }
    }

谢谢！

【问题讨论】：

标签： javascript css reactjs dom flexbox

【解决方案1】：

在 flexbox 中，您需要两个 CSS 属性来使元素居中。一个用于 flexbox 轴，一个用于另一个轴：

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

【讨论】：