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

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

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

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

水平居中：

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

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

三、通过css设置：

"height:50%;text-align:center;">
"display:inline-block; vertical-align:middle">这里是文字

注：这个是水平和垂直都居中。如果不要水平居中 删除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%); }

"div7">
    

        

            这里是文字