An image with the property margin-auto does not vertically and horizontally center within its parent which has the property display flex. This issue is only prevalent on chrome. I've tested this on Brave (my main browser), Firefox and Microsoft Edge.

Took screenshots of Brave and Chrome to show you what the issue is and what it should look like Brave (how it should look like): http://prntscr.com/nn8zeu Chrome: http://prntscr.com/nn8zp3

I'm using bootstrap, so for those of you who are unfamiliar with the class names.

m-auto = margin: auto

d-flex = display: flex

Code

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <!-- jQuery -->
  <script src="./node_modules/jquery/dist/jquery.js"></script>
  <!-- Bootstrap -->
  <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css">
  <title>Document</title>
</head>

<body>
  <div class="container mt-4">
    <h1 class="mb-1">Hi Stackoverflow</h1>
    <p>The item below is div with display flex and some styles to make it round and look pretty. <br> The image inside has margin-auto. Why does image <b>Not</b> center on chrome?. pls help</p>
    <div class="d-flex align-items-center">
      <div class="icon mr-2 d-flex">
        <img src="https://img.icons8.com/ios/420/discord-logo.png" alt="" class="img m-auto">
      </div>
    </div>
  </div>
</body>

</html>

<style>
  .icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: lightseagreen;
  }
  
  .img {
    width: 25px;
    height: auto;
    filter: invert(100%);
  }
</style>

1 Answers

1
JSONaLeo On Best Solutions

Here's an example to center the image in the .icon class div, by setting display to flex, and aligning and justifying everything to center. I added 4 lines of code to the top of the .icon selector in the css.

.icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: lightseagreen;
}

.img {
  width: 25px;
  height: auto;
  filter: invert(100%);
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <!-- jQuery -->
  <script src="./node_modules/jquery/dist/jquery.js"></script>
  <!-- Bootstrap -->
  <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css">
  <title>Document</title>
</head>

<body>
  <div class="container mt-4">
    <h1 class="mb-1">Hi Stackoverflow</h1>
    <p>The item below is div with display flex and some styles to make it round and look pretty. <br> The image inside has margin-auto. Why does image <b>Not</b> center on chrome?. pls help</p>
    <div class="d-flex">
      <div class="icon mr-2 d-flex">
        <img src="https://img.icons8.com/ios/420/discord-logo.png" alt="" class="img m-auto">
      </div>
    </div>
  </div>
</body>

</html>

Hope this helps! Have a nice day :)