@Risclover
Posted
Hi! To address your issue with centering the form, here's what you need.
body {
min-height: 100vh;
height: 100%;
}
Without this, your body was only as tall as the form, but with this, it now fills the entire browser. Then, you'd just use flex to center it vertically and horizontally, like so:
body {
min-height: 100vh;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
I would personally recommend putting the display properties in a separate div that encompasses your app (basically adding a div between <body> and your first element as the app's container, setting its height and width to 100%, and including the display properties above there instead of in the css for the body), but yeah. Doing that fixes it!
Marked as helpful
@KarimChehab2003
Posted
@Risclover You're a lifesaver! Thank you for taking the time to see my issue and help me overcome it :)
