html - Inline-flex 居中和间隙问题

Question

我想用 display: inline-flex; 将两个 div 居中放置在 block 容器中，但不知何故 align-items: center; 和 justify-content : center; 不起作用。仅文本对齐:居中；行得通，但它不应该是那样的(因为我已经用 display: inline-flex 读过它；它应该是 align-items 和 justify-content)我猜？如果我的解决方案是正确的，那么你能告诉我有什么区别吗？

此外，我想消除这两个居中 div 之间的小间隙，但我已经尝试了一些来自 Internet 的解决方案，但没有一个有效。为什么？

如果你们能帮我解决我的两个问题，我会很高兴。

这是代码示例:

.parent {
  border: 1px solid blue;
  background-color: yellow;
  padding: 10px;
}

.container {
  border: 1px dotted green;
  padding: 10px;
  text-align: center;
}

.child, .child2 {
  display: inline-flex;
  border: 1px solid red;
  background-color: honeydew;
  padding: 50px;
}

<div class="parent">
  <div class="container">
    <div class="child">
      <h1> Test1.</h1>
    </div>
    <div class="child2">
      <h1> Test2.</h1>
    </div>
  </div>
</div>

Answer 1

如果您在容器元素上使用 display: flex 它将起作用。 align-items 和 justify-content 将 flex 元素定位在 flex-container 中，因此您需要在父元素上设置 display: flex。

.parent {
  border: 1px solid blue;
  background-color: yellow;
  padding: 10px;
}
.container {
  border: 1px dotted green;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.child,
.child2 {
  display: inline-flex;
  border: 1px solid red;
  background-color: honeydew;
  padding: 50px;
}

<div class="parent">
  <div class="container">
    <div class="child">
      <h1> Test1.</h1>
    </div>
    <div class="child2">
      <h1> Test2.</h1>
    </div>
  </div>
</div>