请问使用display : inline-block+vertical-align 隐式幽灵节点进行布局为何不能实现多行文本垂直水平居中？

<div class="parent">
    <span class="child">测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例</span>
  </div>
  <style>
    .parent {
      height: 100px;
      background-color: aqua;
      text-align: center; /*水平居中*/

      line-height: 100px; /* 通过 line-height 设置幽灵节点的基线 */
    }
    .child {
      color: #fff;
      background-color: blueviolet;

      vertical-align: middle;
      line-height: normal; /* 块级元素时需要加 */
      display: inline-block; /* 重点，要把 line-height 设置成 normal, 要不然会继承100 */
    }
  </style>

设置幽灵节点的高度以及幽灵节点的基线（通过line-height），来设置幽灵节点的x-height，是span的中线与幽灵节点的中线对齐，同样也可以使vertical-align:middle;居中

请问是哪里出错了呢？