テキストを中央に配置します。表を表示します。 divの高さが増えない

Question

実際には、divの中にテキストを垂直にセンタリングすることを練習しています。オンラインで多くの指示を読んでください。しかし、コンテナdivをテーブルとして表示し、その中の子div（この場合は.middle）をtable-cellとして表示できるようにしました。できます。しかし、唯一の問題は、.container divの高さを100％に設定しようとすると、divがテキスト行に折り返してしまうことです。しかし、.container divの高さを明示的に定義すると、テキストを中心にして希望の幅を得ることができます。

誰もがなぜそれを説明できますか？これをより良く理解するには、画像のスクリーンショットを参照してください。

html, 
 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
    left: 0px; 
 
    top: 0px; 
 
    margin-top: 0px; 
 
    margin-right: 0px; 
 
    margin-bottom: 0px; 
 
    margin-left: 0px; 
 
    background-color: rgba(0, 0, 153, 1); 
 
} 
 
.container { 
 
    display: table; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.middle { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 
.inner { 
 
    display: table; 
 
    margin: 0 auto; 
 
}

<div class="container"> 
 

 
    <div class="middle"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 

 
    </div> 
 
</div>

Answer 1

親コンテナも、その高さが明示的に子供にpercentageを使用することができるように述べている必要があります。それ以外の場合は100%の値が何であるかわからない場合は、に別のコンテナを設定します。