HTML, CSS, FLEXBOX

Solution retrospective
How I can center the div vertically? I don't know why there are so much errors on my solutions. I really can't understand them. There are too much rules to obey, you actually forget the delight of coding.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @Sk7867
Hi Bodgan, In your
.main-div
keepmargin: 50px auto
, it will give fixed top/bottom margin as 50px.For the first HTML validation error put
<!DOCTYPE html>
at the very start of your HTML code, for others I recommend removing the role attribute.Happy Coding!!
Marked as helpful - @magdaszsz
To center the card, you can add an additional container around the main div and give it those styles
.container { height: 100vh; display: grid; place-content: center; }
also, it would be great if you could make it responsive for mobile screens.
- @aUnicornDev
Hi Bodgan,
Use flexbox for vertical alignement onn your
.main-div
.display: flex; flex-direction: column; justify-content: center;
.For these validations that you mentioned, these are provided to make a uniformly accessible solution for everyone using the web.
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord