html - 将 div 水平和垂直居中对齐后

Question

我看到很多问题How to align a div horizo​​ntal and vertically center，我也得到了答案。

我得到的代码: HTML-

<div class="outer">
   <div class="middle">
      <div class="inner">
         <div align="center">
            <h1>The Content</h1>

            <p>Once upon a midnight dreary...</p>
         </div>
      </div>
   </div>
</div>

CSS-

.outer {
   display: table;
   position: absolute;
   height: 100%;
   width: 100%;
}

.middle {
   display: table-cell;
   vertical-align: middle;
}

.inner {
   margin-left: auto;
   margin-right: auto;
   background: blue; /*gave blue to know the height and width*/ 
}

我猜对了。
但我无法为其指定默认高度。

当我给 width: 50%; 和 height: 50%; 给 class="inner" 只有宽度被接受了。
我什至无法在顶部和底部之间提供填充空间。
请帮忙。
请不要给我另一个代码来使 div 垂直和水平居中对齐

Answer 1

你想要的(我想)是这个:

body {
    margin : 0;
}

.outer {
   display: table;
   position: absolute;
   height: 100%;
   width: 100%;
}

.middle {
   display: table-cell;
   vertical-align: middle;
   text-align: center;
}

.inner {
   display: inline-block;
   width: 50%;
   height: 50%;
   background: blue;
}

<div class="outer">
   <div class="middle">
      <div class="inner">
          <h1>The Content</h1>
          <p>Once upon a midnight dreary...</p>
      </div>
   </div>
</div>

另见 this Fiddle !