为什么flexbox中心元素正确，而定位属性却不正确？

Question

我正在尝试将div元素居中。在我的代码中似乎一切正确，但元素未正确居中我在哪里错了？如果我尝试通过使用flexbox将其居中，则它会正确居中。定位属性哪里出问题了？

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  width: 200px;
  height: 39px;
  border: 1px solid red;
  position: relative;
}

.cntr {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: blue;
  width: 35px;
  height: 35px;
}

<div class='container'>
  <div class='cntr'>
  </div>
</div>

Answer 1

您可以使用flexbox而不是绝对定位，这样可以使文档流保持完整。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  width: 200px;
  height: 39px;
  border: 1px solid red;
  display: flex;
  justify-content: center; /* Horizontal alignment */
  align-items: center; /* Vertical alignment */
}

.cntr {
  background-color: blue;
  width: 35px;
  height: 35px;
}

<div class='container'>
  <div class='cntr'>
  </div>
</div>

Answer 2

使用flexbox 这是代码 html：

<div class="parent">
  <div class="child">

  </div>
</div>

css：

.parent{
  background: #000;
  width:100%;
  height:100%;
  display:flex;
  justify-content:center;
  align-items:center;

}
.child{
  background: #ff0;
  width:100px;
  height:100px;
}

演示： https://jsbin.com/duxakey/edit?html,css,output