Вертикальный текст центра. Показать таблицу. Высота Div не увеличивается

Question

На самом деле, я занимаюсь центрированием текста по вертикали в div. Прочтите много инструкций в Интернете. Но понравился тот, в котором я могу отображать контейнер div как таблицу, а затем дочерний div внутри него (в данном случае .middle), который будет отображаться как table-cell. Оно работает. Но единственная проблема заключается в том, что всякий раз, когда я пытаюсь установить высоту div .container на 100%, div сжимает, чтобы обернуть себя в текстовую строку. Однако, когда я определяю высоту контейнера .container явно, тогда я могу получить желаемую ширину с текстом, полностью центрированным.

Может ли кто-нибудь объяснить, почему это так? Пожалуйста, обратитесь к снимкам экрана, чтобы понять это лучше.

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% относится, если вы не дадите position: absolute; и установить другой контейнер (с высотой) до position: relative;