How to center vertically and horizontally in React with Material-UI? - reactjs

Question

I want to center a Button inside of a Card that is in the center of the screen. So far I haven't been able to.
This is wha I have so far:
import React from 'react'
import Button from '#material-ui/core/Button'
import { makeStyles } from '#material-ui/core/styles'
import { Card } from '#material-ui/core'
import Grid from '#material-ui/core/Grid'
const useStyles = makeStyles({
root: {
background: 'linear-gradient(45deg, #9013FE 15%, #50E3C2 90%)',
minWidth: '100%',
minHeight: '100vh',
display: "flex",
flexDirection: "column",
justifyContent: "center"
},
card: {
maxWidth: '40%',
minHeight: '20vh',
},
})
export default function LoginPage () {
const classes = useStyles()
return (
<Grid className={classes.root} spacing={0} align="center" justify="center">
<Card className={classes.card} align="center" justify="center">
<Button variant="contained" color="primary">
Hello World
</Button>
</Card>
</Grid>
)
}
It's centered vertically but not horizontally, when I change other parameter I get it centered horizontally but not vertically.
Screenshot of the result
Any Ideas?
Best regards.

Answer 1

You can use alignItems.
Code Sandbox demo: https://codesandbox.io/s/stack-overflow-material-ui-centering-0rgqx
const useStyles = makeStyles({
root: {
background: "linear-gradient(45deg, #9013FE 15%, #50E3C2 90%)",
minWidth: "100%",
minHeight: "100vh",
display: "flex",
flexDirection: "column",
justifyContent: "center"
},
card: {
maxWidth: "40%",
minHeight: "20vh",
display: "flex",
alignItems: "center"
}
});
export default function LoginPage() {
const classes = useStyles();
return (
<Grid
className={classes.root}
spacing={0}
alignItems="center"
justify="center"
>
<Card className={classes.card}>
<Button variant="contained" color="primary">
Hello World
</Button>
</Card>
</Grid>
);
}