css 自适应图文混排垂直居中

问题：
响应式网站，如果给元素定高，会再美感大打折扣，作为一个做过设计师的前端，强迫症让我不想去把高度写死。
Flex布局有兼容性问题又不能考虑IE。

• 可以兼容IE
• 不需要高度
• 随着图片变化，文字相应垂直居中

HTML:
<div class="parents">
  <div class="childImg">
    <img src="http://via.placeholder.com/350x350" alt="">
  </div>
  <div class="childTxt">相对图片垂直居中相对图片垂直居中相对图片垂直居中相对</div>
</div>

CSS:
.parents{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}
.childImg{
  width: 50%;
}
.childImg>img{
  width: 100%;
}
.childTxt{
    position: absolute;
    right: 5%;
    top: 50%;
    width: 40%;
    transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

预览地址