html - 为什么 `position:absolute;` 销毁 ` vertical-align:middle` ？

Question

文本 center 位于 div 的中心，如下面的代码所示。

.Absolute-Center { 
  display: table-cell;
  width: 100px;  
  height: 100px; 
  border:1px solid red; 
  text-align:center;
  vertical-align:middle;
  } 

<div class="Absolute-Center">
    <p>center</p>
</div>

现在在 .Absolute-Center 的 css 中添加一行 position:absolute;。

.Absolute-Center { 
  position:absolute;
  display: table-cell;
  width: 100px;  
  height: 100px; 
  border:1px solid red; 
  text-align:center;
  vertical-align:middle;
  } 

<div class="Absolute-Center">
    <p>center</p>
</div>

现在文本center不在div的中心，为什么position:absolute;会这样？

Answer 1

将 position: absolute 赋给 diplay:table-cell 将强制其为 display: block，并且 vertical-align : middle; 不适用于 block 元素

More Info

你可以包裹Absolute-Center

.wrap {
  position: absolute;
}
.Absolute-Center {
  display: table-cell;
  width: 100px;
  height: 100px;
  border: 1px solid red;
  text-align: center;
  vertical-align: middle;
}

<div class=wrap>
  <div class="Absolute-Center">
    <p>center</p>
  </div>
</div>