如何在材料UI中居中？

Question

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

<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>

它只是水平居中。我怎样才能使它水平和垂直居中？

Answer 1

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

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

请发现minHeight正在为网格容器提供100vh。这里有一个工作示例：https://codesandbox.io/s/zl90ywy4r3

希望这对你有帮助。