设置margin：inline-flex容器上的auto不会按预期工作

Question

我想在父div中居中一个inline-flex容器，但设置 margin：auto 并不做任何事情，即使父div比flex容器宽。 （从结果中可以看出）

将justify-content设置为center并不能提供想要的结果。

我尝试在css中设置 display：inline-flex 以查看它是否是Bootstrap问题，但没有去。

我已设置背景颜色以显示对象。

HTML ：

<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;使用.d-md-block。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

对于任何仍在寻找答案的人。

一个非常简单的方法是在 :before 元素上添加 :after 和 inline-flex 伪元素并向它们添加 flex: 1;。

这两个伪元素会占用剩余的可用空间，没有width时也没有。

.lc-product-thumb-wrap 下面，是inline-flex元素的类

.lc-product-thumb-wrap {
  width: 100%;
}

.lc-product-thumb-wrap:before,
.lc-product-thumb-wrap:after {
  content: '';
  display: block;
  flex: 1;
}