Submitted about 2 years ago

Responsive NFT-Preview card

Akanni Feyisara• 110

@Feyisara2306

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 method of centering the whole page content? Feedbacks are welcome! Thanks.

Community feedback

jimmy• 200

@jimmyhachem

Posted about 2 years ago

in the body : 'display:flex; justify-content: center; align-items: center; height: 100vh' , But you would have to correct the width and height of the 'wrapper'.
Put everything in a div and add 'display:flex; justify-content: center; align-items: center; , width: 100%.
in the wrapper : 'position: relative , left:50% , top:50% , transform: translate(-50% , -50%)'

Hope this helps :)

Marked as helpful

Fatlind Shehu• 2,230

@fatlindshehu

Posted about 2 years ago

Hi @Feyisara2306,

To my opinion the best method for centering a div/component is using flexbox:

display: flex to set the div/component as a flex container.
justify-content: center to center the div/component horizontally.
align-items: center to center the div/component vertically.
Make sure the div/component has a height.
If you’re unfamiliar with flexbox, I would suggest checking THIS
I would suggest measuring heights/widths & paddings/margins with more precision, using a tool like FIGMA or Adobe XD

Keep up the good work!

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