垂直居中的文字。显示表。 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%值所指的内容，除非您提供position: absolute;并且您将另一个容器（具有高度）设置为position: relative;