how to make form in to center of the page

Question

Here is the code uisng material-ui i want to make it center of the page but its not moving to center. how to fix this issue please help me thanks in advance

 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import TextField from '@material-ui/core/TextField';
 import Button from '@material-ui/core/Button';

 const useStyles = makeStyles((theme) => ({
  root: {
 '& > *': {
   margin: theme.spacing(1),
   width: '25ch',
   display: 'flex',
   textAlign : 'center'
 },
},
}));

   export default function Login() {
   const classes = useStyles();

return (
 <form className={classes.root} noValidate autoComplete="off">
   <TextField id="outlined-basic-user" label="UserName" variant="outlined"/>
   <TextField id="outlined-basic-pswd" label="Password" variant="outlined" />
   <Button variant="contained" color="primary">
     Provider
   </Button>
   <Button variant="contained" color="primary">
     Patient
   </Button>
 </form>
);
}

score 1 · Accepted Answer · answered Jan 18 '21 at 08:46

Put a wrapper for form and make it width: 100% and height: 100vh

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";
import Button from "@material-ui/core/Button";

const useStyles = makeStyles((theme) => ({
  root: {
    margin: theme.spacing(1),
    width: "300px",
    height: "400px",
    display: "flex",
    flexDirection: "column",
    justifyContent: "space-around",
    textAlign: "center"
  },
  wrapper: {
    width: "100%",
    height: "100vh",
    display: "flex",
    justifyContent: "center",
    alignItems: "center"
  }
}));

export default function App() {
  const classes = useStyles();

  return (
    <div className={classes.wrapper}>
      <form className={classes.root} noValidate autoComplete="off">
        <TextField
          id="outlined-basic-user"
          label="UserName"
          variant="outlined"
        />
        <TextField
          id="outlined-basic-pswd"
          label="Password"
          variant="outlined"
        />
        <Button variant="contained" color="primary">
          Provider
        </Button>
        <Button variant="contained" color="primary">
          Patient
        </Button>
      </form>
    </div>
  );
}

Codesandbox

score 0 · Answer 2 · answered Jan 18 '21 at 08:50

You are using flex on the child elements which does not do anything, also textAlign should be used on the wrapper element, but anyway using flex is better these days.

you can do the following:

 const useStyles = makeStyles((theme) => ({
  root: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center' // if you want to make things centered vertically also
  },
}));

score 0 · Answer 3 · answered Jan 18 '21 at 08:52

0

Well, I think all you need to do is to use justify-content: center; with display:flex and it should do the job for you. If that didn't work provide me with a working demo on sandbox and I will look into it.

answered Jan 18 '21 at 08:52

Ahmad Dalao

1,968
1
8
14

how to make form in to center of the page

3 Answers3