Trying to center a card on a page

Question

i am not able to center a card on the webpage. I've used Flex to center it, but it is only aligning it horizontally, not vertically.

The output that i was expecting:

Output that i got:

My Code for reference:

.container{
      display: flex;
      justify-content: center;
      align-items: center;
    }

html code:

<div class="container">
    <div class="card">
      <div class="qr">
        <img src="./images/image-qr-code.png" alt="qr code which leads to Frontend Mentor">
            <div class="content">
            <h3>Improve your front-end skills by building projects</h3>
            <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
          </div>
        </div>
    </div>
  </div>

Am i missing something? I believe i've used the correct logic (justify content & align-items), could there be something wrong with VSCode's live preview extension ?

Answer 1

You need to ensure that the parent container, which contains the .container class, has a defined height that allows for vertical alignment. If the parent container's height collapses to zero, then the alignment might not work as expected. Here is the CSS that you looking for.

  html,
  body {
    height: 100%;
  }
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }
  .qr {
    width: 300px;
    text-align: center;
  }