How come I can't horizontally center an img element inside a flex item by using the margin property?

Question

I wanted to horizontally center an img element within an article element by using the margin: 0 auto; declaration.

For some reason, only the auto part of the value doesn't work as intended, because changing it to a number does.

Why is this? I suspect it has something to do with the article being a flex item because using the display: flex; declaration on it corrects the problem.

So, I realize I can still center the img element by turning its parent, the article, into a flex container.

But I don't understand why this is and how to make sense of it, and that's what's bugging me.

Specifically, why does only the auto part of the margin value not work on the img element when it's inside a flex item?

Also, once I use display: flex; on the article element, is it better practice to use margin: 0 auto; or justify-content: center; to center the image?

* {
  padding: 0;
  margin: 0;
  display: border-box;
}

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

main {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1420px;
  height: 500px;
  background-color: hsl(212, 45%, 89%);
  box-shadow: 0 15px 27px 0 hsla(0, 0%, 86%, 0.905);
}

article {
  height: 300px;
  width: 200px;
  border-radius: 20px;
  background-color: hsl(0, 0%, 100%);
  box-shadow: 0 15px 20px 0 hsl(214, 41%, 85%);
}

img {
  margin: 0 auto;
}

<!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">
  <!-- displays site properly based on user's device -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Outfit&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="CSS/style.css">
  <link rel="icon" href="images/favicon-32x32.png" sizes="32x32" type="image/png">
  <meta name="description" content="QR Code for Frontend Mentor Homepage">
  <meta name="author" content="Ryan R.">
  <title>Frontend Mentor | QR Code</title>
</head>

<body>
  <main>
    <article>
      <img src="https://qrcg-free-editor.qr-code-generator.com/main/assets/images/websiteQRCode_noFrame.png" alt="QR code" width="170" height="170">
    </article>
  </main>
</body>

</html>

CODEPEN

Because the image isn't a child of `main` it's child of `article` — Roberto Zvjerković, Nov 20 '22 at 12:27

score 0 · Answer 1 · answered Nov 20 '22 at 12:35

As suggested the img is not the direct child of main it is child of article so,

Change the CSS of article to this, you can further add CSS to position the image.

article {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
    width: 200px;
    border-radius: 20px;
    background-color: hsl(0, 0%, 100%);
    box-shadow: 0 15px 20px 0 hsl(214, 41%, 85%);
}

score 0 · Answer 2 · answered Nov 20 '22 at 12:46

It is because the image is displaying as inline where instead you need it set as display: block;. Alternatively you could set text-align: center; on the article element however this would apply to all content and may not be desired.

To understand more about inline and block you can read an existing answer from `margin:auto;` doesn't work on inline-block elements

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box; /* this was incorrect before */
}

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

main {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1420px;
  height: 500px;
  background-color: hsl(212, 45%, 89%);
  box-shadow: 0 15px 27px 0 hsla(0, 0%, 86%, 0.905);
}

article {
  height: 300px;
  width: 200px;
  border-radius: 20px;
  background-color: hsl(0, 0%, 100%);
  box-shadow: 0 15px 20px 0 hsl(214, 41%, 85%);
}

img {
  margin: 0 auto;
  display: block; /* set item to take available space of parent */
}

<!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">
  <!-- displays site properly based on user's device -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Outfit&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="CSS/style.css">
  <link rel="icon" href="images/favicon-32x32.png" sizes="32x32" type="image/png">
  <meta name="description" content="QR Code for Frontend Mentor Homepage">
  <meta name="author" content="Ryan R.">
  <title>Frontend Mentor | QR Code</title>
</head>

<body>
  <main>
    <article>
      <img src="https://qrcg-free-editor.qr-code-generator.com/main/assets/images/websiteQRCode_noFrame.png" alt="QR code" width="170" height="170">
    </article>
  </main>
</body>

</html>

How come I can't horizontally center an img element inside a flex item by using the margin property?

2 Answers2