在 inline-flex 容器上设置 margin:auto 无法按预期工作

Question

我想将 inline-flex 容器放在父 div 内居中，但设置margin:auto不会执行任何操作，即使父 div 比 flex 容器宽。（从结果中可以看出）

将 justify-content 设置为 center 不会给出想要的结果。

我尝试在 css 中设置display:inline-flex来查看是否是 Bootstrap 问题，但没有成功。

我设置了背景颜色来可视化对象。

网页：

<div class="d-none d-md-block" style="background-color:blue;">
    <div class="d-inline-flex flex-wrap lc-product-thumb-wrap">
        <img src="demo1.png" class="lc-product-thumb-img" id="thumb-0" />
        <img src="demo1.png" class="lc-product-thumb-img" id="thumb-1" />
        <img src="demo2.png" class="lc-product-thumb-img" id="thumb-2" />
    </div>
</div>

CSS：

.lc-product-thumb-wrap {
  background-color: pink;
  margin: auto;
}

.lc-product-thumb-wrap .lc-product-thumb-img {
  width: 98px;
  margin: 2px;
  padding: 4px;
  border: 1px solid #003c02;
  background-color: #dafac1;
}

结果：

Answer 1

由于它是内联元素，因此margin:auto不起作用，请使用text-align:center;to .d-md-block。

.d-md-block {
  text-align: center;
}

.lc-product-thumb-wrap {
  background-color: pink;
  margin: auto;
}

.lc-product-thumb-wrap .lc-product-thumb-img {
  width: 98px;
  margin: 2px;
  padding: 4px;
  border: 1px solid #003c02;
  background-color: #dafac1;
}

<div class="d-none d-md-block" style="background-color:blue;">
  <div class="d-inline-flex flex-wrap lc-product-thumb-wrap">
    <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300" class="lc-product-thumb-img" id="thumb-0" />
    <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300" class="lc-product-thumb-img" id="thumb-1" />
    <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300" class="lc-product-thumb-img" id="thumb-2" />
  </div>
</div>