I am currently attempting to center align a button on the page. In addition, I plan to include a form in that same area, so I require a container or box that is positioned exactly in the middle of the page. Despite specifying a maximum height and width of 100%, the button is centered, which is great, but it remains at the very top.
It seems like I may need an additional box to serve as a container around the form components that will be nested inside the root Box.
I am unsure if I am providing the correct property names such as alignItems, since this involves styled objects where you cannot use align-items as a prop, for example.
import React from 'react';
import Button from '@material-ui/core/Button';
import { Box } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles({
root: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: '100%',
height: '100%'
},
button: {
background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
border: 0,
borderRadius: 3,
boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
color: 'white',
height: 48,
padding: '0 30px'
}
});
function Login() {
const classes = useStyles();
return (
<Box className={classes.root}>
<Button className={classes.button}>Login</Button>
</Box>
);
}
export default Login;