具有自动边距的元素不会在父级内部居中，并在 chrome 中显示 flex答案

【问题标题】：Element with margin auto does not center inside of parent with display flex in chrome具有自动边距的元素不会在父级内部居中，并在 chrome 中显示 flex
【发布时间】：2019-09-29 05:30:05
【问题描述】：

具有属性 margin-auto 的图像不会在其具有属性 display flex 的父级中垂直和水平居中。此问题仅在 chrome 上普遍存在。我已经在 Brave（我的主浏览器）、Firefox 和 Microsoft Edge 上对此进行了测试。

截取 Brave 和 Chrome 的屏幕截图，向您展示问题所在以及应该是什么样子勇敢（它应该是什么样子）：http://prntscr.com/nn8zeu 铬：http://prntscr.com/nn8zp3

我正在使用引导程序，所以对于那些不熟悉类名的人来说。

m-auto = 边距：自动

d-flex = 显示：弹性

代码

<!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>

【问题讨论】：

图片是内联元素，不受边距影响。只需使用 flex 属性使其居中即可。
你能给我一个代码示例吗？不太清楚你的意思。
我为您的代码创建了runnable code snippet，但无法在 chrome 上重现您的问题。也许还有其他一些规则会干扰您的居中？
@PiotrWicijowski，我设法在父 div 上使用 flex-direction: column 解决了这个问题。仍然感谢您花时间创建 sn-p。感谢您的时间:)

标签： html css google-chrome flexbox

【解决方案1】：

这是一个在.icon 类 div 中居中图像的示例，方法是将 display 设置为 flex，并将所有内容对齐和对齐到中心。我在 css 中 .icon 选择器的顶部添加了 4 行代码。

.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>

希望这会有所帮助！祝你有美好的一天:)

【讨论】：

非常感谢。 flex-direction: 列很好地解决了我的问题。感激不尽