Question

我有一个登录页面，其中包含2个文本字段：用户名和密码以及登录按钮，其中用户名字段位于最顶部，密码字段位于其下方，登录按钮位于底部。我希望它们始终在页面的中心，无论是垂直还是水平。我尝试过：

<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为Grid容器提供100vh。这是一个有效的示例：https://codesandbox.io/s/zl90ywy4r3

希望这会对您有所帮助。

如何在material-ui中居中？

1 个答案: