I'm trying to position the button exactly at the center bottom of the page irrespective of the content height in that page.
Excerpt from my code
const useStyles = makeStyles({
button: {
bottom: 0,
right: 0,
position: "absolute"
}
});
export default function Home() {
const classes = useStyles();
return (
<div>
<Box>
<Box>
<Paper elevation={2} sx={{ width: "100%", height: "50vh" }}>
Some data
</Paper>
</Box>
<Box textAlign="center">
<Button
className={classes.button}
variant="contained"
sx={{ width: "200px" }}
>
Submit
</Button>
</Box>
</Box>
</div>
);
}
I created a working example using CodeSandbox. Could anyone please help?
This is more css related (see other post) but you as you manually set the width of the Button you can position it 50% from the left and then subtracting half of its width from its left margin:
bottom: 0,
left: "50%",
marginLeft: -100,
position: "absolute"