使用 flex 可以非常简单的实现垂直居中。 - 在线编辑器

          <style>
  .parent-12 {
    background: green;
    height: 300px;
    width: 200px;
    padding: 20px;
    margin: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    resize: vertical;
    overflow: auto;
  }

  .parent-12 div {
    background: black;
    color: white;
    padding: 20px;
    resize: vertical;
    overflow: auto;
  }
</style>
<div class="parent-12">
  <div>
    我是一个块状元素，高度未知，通过flexbox可以实现上下居中。
  </div>
</div>

        