高さが固定されていない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">