一个高度不固定的div，里面的文字如何垂直居中？

最近在做项目中遇到父元素高度不固定，但是Dom元素里面的文本内容需要上下居中显示,解决方案：
一、针对弹性布局的盒子：
垂直居中：

align-items:center; display: -webkit-flex;

水平居中：

justify-content:center; display: -webkit-flex;

二、可通过js动态设置：
先获取这个div的高度，然后通过js设置这个div的line-height=div高度

三、通过css设置：

<div>
<div style="height:50%;text-align:center;">
<span style="display:inline-block; vertical-align:middle">这里是文字</span>
</div>
</div>

注：这个是水平和垂直都居中。如果不要水平居中 删除text-align:center;

四、通过定位的方式：

/* CSS部分 */
#div7{ height:200px; background:#000; }
#div7>div{ height:50%; position:relative; background:#F00; }
/* 如果不要求横向居中请把 left:50% 去掉，并把 transform:translate(-50%,-50%) 改为 transform:translateY(-50%) */
#div7>div>div{ background:#06C; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }

<!-- HTML部分 -->
<div id="div7">
    <div>
        <div>
            这里是文字
        </div>
    </div>
</div>