How to make paper responsive - Material Ui - reactjs

Question

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

Answer 1

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>