why is justify-content: center; of my css code not working

Question

I took this front end challenge from frontend mentor but I have been trying to move the card to the center of the screen but it looks like the justify-content: center isn't working for it. What should I do?

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600&display=swap');

:root {
    --white: hsl(0,0%,100%);
    --lightgray: hsl(212,45%,89%);
    --grayishblue: hsl(220,15%,55%);
    --darkblue: hsl(218,44%,22%);
    font-family: outfit;
    font-size: 15px;
}

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--lightgray);
    font-family: 'outfit' sans-serif;
}

.card {
    background-color: white;
    max-width: 330px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 15px;
    padding:15px;
    
}

img {
    width: 100%;
    border-radius: 20px;
}

.qr-code {
    
    text-align: center;
    
}

h2 {
    color: var(--darkblue);
    
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link rel="stylesheet" href="styles.css">
    <title>Frontend Mentor | QR code component</title>

    <style>
        .attribution { font-size: 11px; text-align: center; }
        .attribution a { color: hsl(228, 45%, 44%); }
      </style>
</head>
<body>
    <div class="card">

       
            <img src="images/image-qr-code.png" alt="qr-code">
            <div class="qr-code">
            <h2>Improve Your front-end skills by building projects</h2>
            <p>Scan the QR code to visit Frontend Mentor your coding skills to the next level</p>
        </div>
        
        
    </div>
    <div class="attribution">
        Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
        Coded by <a href="#">Your Name Here</a>.
      </div>
</body>
</html>

Here is what I'm going for: I took this front end challenge from frontend mentor but I have been trying to move the card to the center of the screen but it looks like the justify-content: center isn't working for it. What should I do ?

intended outcome

Do you want to center vertically? – Tushar Shahi May 09 '22 at 05:22 — Tushar Shahi, May 09 '22 at 05:22

score 4 · Answer 1 · answered May 09 '22 at 05:24

If you look up the definition for justify-content (like w3schools):

The justify-content property aligns the flexible container's items when the items do not use all available space on the main-axis (horizontally).

Note that it says the flexible container's items, meaning that applying the justify-content property is applied to the container's children.

It seems that what you've done is apply the justify-content: center property on the .card element - referring to the definition above, this means that the children of the .card element will be centered, not .card itself.

ps. also important to note that the definition says horizontally

Very good and complete explanations:) – Arman Ebrahimi May 09 '22 at 06:24 — Arman Ebrahimi, May 09 '22 at 06:24

score 3 · Answer 2 · answered May 09 '22 at 05:29

Assuming you want the card to be in the center of the screen, you need a wrapper around it. You can also make body a flexbox, but I'm not in favor of doing that.

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600&display=swap');
:root {
  --white: hsl(0, 0%, 100%);
  --lightgray: hsl(212, 45%, 89%);
  --grayishblue: hsl(220, 15%, 55%);
  --darkblue: hsl(218, 44%, 22%);
  font-family: outfit;
  font-size: 15px;
}

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--lightgray);
  font-family: 'outfit' sans-serif;
}

.wrapper {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.card {
  background-color: white;
  max-width: 330px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 15px;
  padding: 15px;
}

.attribution {
  font-size: 11px;
  text-align: center;
}

.attribution a {
  color: hsl(228, 45%, 44%);
}

img {
  width: 100%;
  border-radius: 20px;
}

.qr-code {
  text-align: center;
}

h2 {
  color: var(--darkblue);
}

<div class="wrapper">
  <div class="card">
    <img src="images/image-qr-code.png" alt="qr-code">
    <div class="qr-code">
      <h2>Improve Your front-end skills by building projects</h2>
      <p>Scan the QR code to visit Frontend Mentor your coding skills to the next level</p>
    </div>
  </div>
  <div class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="#">Your Name Here</a>.
  </div>
</div>

Arman Ebrahimi · Answer 3 · 2022-05-09T06:33:18.857

Gerard's answer is very good. One other way of centering a div in the body is using from below code:

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

So wrap your code in a container, then add the above CSS to that.

Edit: Your .card is centralized horizontally with margin: 0 auto. in my answer no need to do it.

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600&display=swap');

:root {
    --white: hsl(0,0%,100%);
    --lightgray: hsl(212,45%,89%);
    --grayishblue: hsl(220,15%,55%);
    --darkblue: hsl(218,44%,22%);
    font-family: outfit;
    font-size: 15px;
}

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--lightgray);
    font-family: 'outfit' sans-serif;
}

.container{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.card {
    background-color: white;
    max-width: 330px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 15px;
    padding:15px;
}

img {
    width: 100%;
    border-radius: 20px;
}

.qr-code {
    
    text-align: center;
    
}

h2 {
    color: var(--darkblue);
    
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link rel="stylesheet" href="styles.css">
    <title>Frontend Mentor | QR code component</title>

    <style>
        .attribution { font-size: 11px; text-align: center; }
        .attribution a { color: hsl(228, 45%, 44%); }
      </style>
</head>
<body>
  <div class="container">
    <div class="card">
            <img src="images/image-qr-code.png" alt="qr-code">
            <div class="qr-code">
            <h2>Improve Your front-end skills by building projects</h2>
            <p>Scan the QR code to visit Frontend Mentor your coding skills to the next level</p>
            </div> 
    </div>
    <div class="attribution">
        Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
        Coded by <a href="#">Your Name Here</a>.
    </div>
  </div>
</body>
</html>

why is justify-content: center; of my css code not working

3 Answers3