Html 将内联块脊椎内的文本与父容器高度（百分比）垂直对齐

我正在努力将文本垂直对齐到一个

display:inlineblock

span

此

span

位于容器内，容器的高度设置为包装容器的百分比：

<div class="wrap">
    <div class ="header">
        <span>test</span>
    </div>
</div>

这里是

我还尝试了

display:table和
显示：表格单元格组合，但这不起作用

编辑：

我还有一个问题：为什么线条高度：100%不起作用

请帮忙
 只需使用
行高

CSS

.header span {
  display: inline-block;
  line-height:2.2em;
}

Flexbox可以做到这一点

.header span {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  height: 100%;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  background: orange;
}


html，正文{
身高：100%；
最大高度：1440px；
最大宽度：1920像素；
}
.包裹{
宽度：100%；
身高：100%；
最大宽度：1920像素；
最小宽度：1024px；
最大高度：1440px；
最小高度：768px；
背景：绿色；
}
.标题{
背景：黄色；
身高：4.44%；
}
.收割台跨度{
显示：内联flex；
身高：100%；
对齐项目：居中；
背景：橙色；
}
.主体{
背景：红色；
身高：80%；
}
.页脚{
背景：蓝色；
身高：10%；
}

测试
>我还有一个问题：为什么线条高度：100%不起作用

以百分比表示的行高与元素的字体大小有关。参考

因此，如果希望“.header span”的高度和线条高度相同，可以获取，然后将其设置为线条高度：

let divElement = document.getElementById('divId');
let height = document.defaultView.getComputedStyle(divElement).height;
divElement.style.lineHeight = height;

我在代码中尝试了这一点，当标题缩小时，文本不再居中对齐。另外，span不是父div高度的100%，除非我再次将高度设置为100%…IE10支持flexbox（我想前缀是）。前缀是什么？我发现
显示：-ms flexbox和
-webkit-flex:1
，你能帮我把它们添加到JSFIDLE中吗？我不知道如何使用它？
let divElement = document.getElementById('divId');
let height = document.defaultView.getComputedStyle(divElement).height;
divElement.style.lineHeight = height;