垂直居中文本。显示表。 div高度不增加

Question

实际上，我正在练习在 div 中垂直居中文本。网上看了很多说明。但喜欢我可以将容器 div 显示为表格，然后将其中的子 div（在本例中为 .middle）显示为表格单元格的那个。有用。但唯一的问题是，每当我尝试将 .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% 值指的是什么，除非你给position: absolute; 并且你将不同的容器（有高度）设置为position: relative;