为什么margin auto不能垂直居中？ [复制]

Question

我想我对自动边距的工作方式有些困惑。在这种情况下，我在其中创建了一个父 div 和一个子 div，并且两个 div 框都指定了宽度和高度。然后，我尝试使用自动边距使内部 div 水平和垂直对齐。

<div id="parent">
    <div id="child"></div>
</div>

#parent {
  width: 200px;
  height: 200px;
  background: red;
}

#child {
  width: 50%;
  height: 50%;
  background: blue;
  margin: auto;
}

结果：

不知何故，结果出乎我的意料。有谁知道为什么？

Answer 1

只需使用display: flex

#parent {
  width: 200px;
  height: 200px;
  background: red;
  display: flex;
  justify-content: center;
  align-items: center;
}

#child {
  width: 50%;
  height: 50%;
  background: blue;
}

<div id="parent">
    <div id="child"></div>
</div>