Skip to content
Submitted over 2 years ago

Basic HTML, CSS and Flexbox Project

Sumayyah Sayyed•10
@SumayyahSayyed
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I don't understand how to center my whole card vertically. I used margin to center it. But is there any better solution to this?

Community feedback

  • Fat•910
    @FahatmahPosted over 2 years ago

    There are several ways to center a div or your card. You can do these followings:

    1. display: flex; align-items: center; justify-content: center;
    2. display: grid; place-items: center;
    3. position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);

    Don't forget to make the body height to 100 of it's viewport height. Like this body { min-height: 100vh; }

    1
  • Miguel Silva•510
    @migsilva89Posted over 2 years ago

    I believe you can fix it with::

    margin-top: 0; margin-bottom: 0; margin-left: auto; margin-right: auto;

    Great job with the challenge, keep going.

    Regards, Miguel Silva

    0

Please log in to post a comment

Log in with GitHub

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