场景6：垂直居中知道高度的 block 元素 - 在线编辑器

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

  .parent-10 div {
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 20px;
    right: 20px;
    height: 100px;
    margin-top: -50px; /* 高度的一半 */
    background: black;
    color: white;
    padding: 20px;
  }
</style>
<div class="parent-10">
  <div>
    我是一个块状的元素，我有固定高度，通过高度可计算出垂直居中的偏移量。
  </div>
</div>

        