Why `position:absolute;` destroy ` vertical-align:middle`?

Question

The text center is located at the center of div such as below code show.

.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>

Now to add a line position:absolute; in the css of .Absolute-Center.

.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>

The text center was not at the center of div now ,why position:absolute; can result in this?

Answer 1

position: absolute interrupts on display: table / table-cell, so you need to centered using padding / 50% line-height of that element's height.

Instead use the flexbox properly like below.

Use This:

.Absolute-Center {
  border: 1px solid red;
  display: flex;
  flex-flow: column nowrap;
  height: 100px;
  justify-content: center;
  position: absolute;
  text-align: center;
  width: 100px;
}

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

Answer 2

Giving position: absolute to diplay:table-cell will force it to be display: block, and vertical-align: middle; does not work with block elemets

More Info

you can wrap 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>