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

Question

The text center is located in the center of the div, for example, when showing code.

 .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 add the line position:absolute; in css .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 center text was no longer in the center of the div, why position:absolute; can lead to this?

Answer 1

position: absolute is interrupted by display: table / table-cell , so you need centered use padding / 50% the row height of this element's height.

Use flexbox , as shown 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

Providing position: absolute to diplay:table-cell will make it be display: block , and vertical-align: middle; will not work with block elements

Additional Information

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> 

Answer 3

You can use CSS Flexbox .

Take a look at the code below:

 .Absolute-Center { position: absolute; display: flex; /* Flexbox Property */ justify-content: center; /* Horizontal Centering */ align-items: center; /* Vertical Centering */ width: 100px; height: 100px; border:1px solid red; } 

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

Hope this helps!