Material ui 如何在物料界面中居中？

我有一个登录页面，有两个文本字段：用户名、密码和登录按钮，用户名字段在最上面，密码字段在下面，登录按钮在底部。我希望它们始终位于页面的中心，无论是垂直还是水平。我试过这个：

<Grid
    className={classes.container}
    container
    spacing={16}
    direction="column"
    justify="center"
    alignItems="center"
>
    <Grid item xs={12}>
        <TextField />
    </Grid>
    <Grid item xs={12}>
        <TextField />
    </Grid>
    <Grid item xs={12}>
        <Button />
    </Grid>
</Grid>

---

它只水平居中。如何使页面水平和垂直居中？

您几乎得到了答案，您的解决方案的问题在于您没有提供页面的高度，因此正确的答案是：

const styles = theme => ({
  content: {
    flexGrow: 1,
    backgroundColor: theme.palette.background.default,
    padding: theme.spacing.unit * 3
  },
  container: {
    minHeight: "100vh"
  }
});

class LoginPage extends Component {
  render() {
    const { classes } = this.props;

    return (
      <div className={classes.content}>
        <Grid
          container
          spacing={16}
          direction="column"
          alignItems="center"
          justify="center"
          className={classes.container}
        >
          <Grid item xs={12}>
            text field
          </Grid>
          <Grid item xs={12}>
            text field
          </Grid>
          <Grid item xs={12}>
            <Button variant="raised" color="primary">
              Login
            </Button>
          </Grid>
        </Grid>
      </div>
    );
  }
}

constyles=theme=>({
内容：{
flexGrow:1，
backgroundColor:theme.palette.background.default，
填充：theme.space.unit*3
},
容器：{
最小高度：“100vh”
}
});
类LoginPage扩展组件{
render（）{
const{classes}=this.props；
返回(
文本字段
文本字段
登录
);
}
}

请发现minHeight为网格容器提供100vh。 以下是一个工作示例：

---

希望这能对您有所帮助。

使用material ui垂直居中元素与使用经典CSS垂直居中元素并无不同。目前最简单的解决方案是使用flexbox css模型，如下所示：