相关疑难解决方法(0)

所以我知道如果我们使用,我们可以将div水平居中margin:0 auto;.应该margin:auto auto;如何工作我认为它应该工作？垂直居中也是如此？

为什么不起作用vertical-align:middle;？

.black {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,.5);
}
.message {
    background:yellow;
    width:200px;
    margin:auto auto;
    padding:10px;
}

<div class="black">
    <div class="message">
        This is a popup message.
    </div>
</div>

的jsfiddle

如果这个问题已经在 stackoverflow 上提出过，请纠正我！如果确实如此，我深表歉意，但我已经寻找了一段时间，只找到了方法而不是原因。

{ display: inline-block; }我的问题是：除非指定，否则父 div 似乎会自动占据页面的整个宽度。指定后，它会根据其子元素的宽度调整其宽度。这确实很有用，但我觉得了解为什么会发生这种情况对我来说很重要。这是一些视觉表示的代码。提前致谢！

编辑：我看到有些人已将我的问题标记为重复，但请告诉我另一个问题中的位置解释了为什么显示内联块会自动调整到其子级的高度和宽度。谢谢你！

#wrapper {
  border: 1px solid black;
  display: inline-block;
}
#child_div {
  height: 100px;
  width: 100px;
  border: 1px solid black;
  margin: 10px;
}

<div id="wrapper">
  <div id="child_div"></div>
</div>

我想将 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;
}

结果：