Inline-flex 居中和间隙问题

Question

我想在一个块容器中使用display: inline-flex; 将两个div 居中，但不知何故align-items: center; 和justify-content: center; 不起作用。只有文本对齐：居中；有效，但它不应该是这样的（因为我已经阅读了 display: inline-flex; 它应该是 align-items 和 justify-content）我猜？如果我的解决方案是正确的，那你能告诉我有什么区别吗？

另外，我想消除这两个居中 div 之间的小差距，但我已经尝试了一些来自互联网的解决方案，但都没有奏效。为什么？

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

代码示例如下：

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