Submitted almost 3 years ago

NFT preview card solution using Flexbox

Noel Roy• 10

@noelroy

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

NFT preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

What is the best way to centre a div in a page ?

Community feedback

Coder Suresh• 870

@coderSuresh

Posted almost 3 years ago

To center a div, you can use flexbox. For example, you have a div with a class name container that contains everything inside a body tag. In order to center that div, you can use flexbox as:

body {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
}

In this code, we are giving a height of 100 vh (viewport height) which covers the full height of the screen. "align-items: center" centers the div vertically, and "justify-content: center" centers the div horizontally.

I saw that we have a section with a class name container. To center that container, instead of giving it a margin of 10vh, you can use flexbox as shown above.

Let me know if this helped you. If it didn't I am always here for you. Thanks for reading.

Marked as helpful

Anosha Ahmed• 9,300

@anoshaahmed

Posted almost 3 years ago

Hey good job on the challenge! In the future, to avoid accessibility issues, include at least one <h1> in your code. Instead of wrap everything in your body in <section>, wrap it in <main>.

To answer your question, I would say give your <body> a min-height=100vh and use flexbox.

Marked as helpful

Please log in to post a comment

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