这时候，我们仍然可以将元素向上移动其高度的一半来垂直居中它。 - 在线编辑器

CSS 布局
CSS水平，垂直居中的11个场景
这时候，我们仍然可以将元素向上移动其高度的一半来垂直居中它。

          <style>
  .parent-11 {
    background: green;
    height: 300px;
    margin: 20px;
    width: 300px;
    position: relative;
    resize: vertical;
    overflow: auto;
  }

  .parent-11 div {
    position: absolute;
    top: 50%;
    left: 20px;
    right: 20px;
    background: black;
    color: white;
    padding: 20px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%); /* 自身的高度向上偏移一半 */
    resize: vertical;
    overflow: auto;
  }
</style>

<div class="parent-11">
  <div>
    我是一个块状元素，高度位置，通过transform可以自动算出高度。
  </div>
</div>

        