How to make paper responsive - Material Ui-CodePudding

I'm making an app, and I am currently working on making the login page. I want the login tools to be responsive, centered by width and height. justify-content : 'center' was not working for me, but it seemed to be working with other people's code, so I am not sure what the problem is.

enter image description here This is the image of the website

My Body Code

<div>
  <Paper elevation={10} className={classes.root}>
    <Grid align="center">
      <h2 className={classes.title}>Log in </h2>
    </Grid>
    <form onSubmit={this.submitLogin}>
      <Paper className={classes.paper}>
        <TextField
          id="standard-basic"
          label="Email"
          name="name"
          type="text"
          value={this.state.name}
          onChange={this.handleInputChange}
          fullWidth
          required
        />
      </Paper>

      <Paper className={classes.paper}>
        <TextField
          id="standard-basic"
          label="Password"
          name="password"
          type="password"
          value={this.state.password}
          onChange={this.handleInputChange}
          fullWidth
          required
        />
      </Paper>
      <Typography className={classes.pf}>
        <Link href="">Forgot Password?</Link>
      </Typography>
      <Typography className={classes.pf}>{this.state.text}</Typography>
      <Tooltip title="Will Remember You When You Come Back">
        <FormControlLabel
          control={<Checkbox name="checkedB" color="primary" />}
          label="Remember Me"
        />
      </Tooltip>
      <Button
        type="submit"
        className={classes.log}
        onClick={this.submitLogin}
        variant="contained"
        fullWidth
      >
        LOG IN
      </Button>
    </form>

    <Typography className={classes.fp}>
      Haven't created an account?
      <Tooltip title="Go to the Sign Up page">
        <Link href="./register"> Sign Up</Link>
      </Tooltip>
    </Typography>
  </Paper>
</div>

My Theme Code

const styles = (theme) => ({
  root: {
    padding: 50,
    height: 450,
    width: 400
  },
  title: {
    fontSize: "30px"
  },
  paper: {
    marginTop: "15px"
  },
  log: {
    background: "#3f51b5",
    color: "white",
    border: "0px",
    borderRadius: "5px",
    borderColor: "grey",
    fontSize: "20px",
    height: "45px",
    marginTop: "5%"
  },
  fp: {
    marginTop: "80px",
    marginLeft: "65px"
  },
  pf: {
    marginTop: "8px"
  }
});

I couldn't really find the 'working' solutions for me, so I'm posting a question

CodePudding user response：

Wrap your Paper component in a div with the styles you mention, that should work as expected:

<div style={{
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    // Change the size to fit the parent element of this div
    width: '100%',
    height: '100%',
}}>
    <Paper>
        SomeStuff...
    </Paper>
</div>