ReactJS Material UI aligning form field center - reactjs

Question

I am going through a trouble to align my react form to center.
This is my form:
I am using reactjs Material UI
<Grid item xs={12}>
<Grid item xs={12}>
<FormGroup noValidate autoComplete="on">
<TextField
label="SSN"
type="number"
className={classes.textField}
name='ssn'
/>
</FormGroup>
</Grid>
</Grid>
i am trying to align the form to center.
If you want to see entire component, this is the component that contain the form
import React from 'react';
import TextField from '#material-ui/core/TextField';
import Paper from '#material-ui/core/Paper';
import Grid from '#material-ui/core/Grid';
import Button from '#material-ui/core/Button';
import useStyles from '../src/styleMaker'
import { connect } from "react-redux";
import { FormGroup } from '#material-ui/core';
import { makeStyles } from '#material-ui/core/styles';
function App(props) {
const useStyles = makeStyles(theme => ({
container: {
display: 'flex',
flexWrap: 'wrap',
},
textField: {
marginLeft: theme.spacing(1),
marginRight: theme.spacing(1),
width: 200,
},
}));
const classes = useStyles();
return (
<React.Fragment>
<div className={classes.container}>
<Grid item xs={12}>
<Grid item xs={12}>
<FormGroup noValidate autoComplete="on">
<TextField
label="SSN"
type="number"
className={classes.textField}
name='ssn'
/>
</FormGroup>
</Grid>
</Grid>
</div>
</React.Fragment>
);
}
export default App;
Can anyone help me to make this form to center? I tried whole day long but i failed to align.

Answer 1

If you use to make form centered horizontally, add following style to makeStyles
formGroup: {
alignItems: 'center'
}
and assign formGroup class name to <FormGroup>
<FormGroup className={classes.formGroup} noValidate autoComplete="on">
<TextField
label="SSN"
type="number"
className={classes.textField}
name='ssn'
/>
</FormGroup>
Here is working form
If you want to center it vertically and horizontally, the easiest way is to make some root <div> positioned absolutely and set width and height to 100%. This makes <div> to occupy whole screen. Then you can use justify-content and align-items to center form.
container: {
display: "flex",
flexWrap: "wrap",
position: "absolute",
top: 0,
left: 0,
height: "100%",
width: "100%",
alignItems: "center"
},
Here is working form, that is aligned to center both horizontally and vertically