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

Question

Tekst center znajduje się w środku elementu div, takiego jak poniższy kod.

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

teraz, aby dodać linię position:absolute; w 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>

Tekst center nie było w środku div teraz, dlaczego position:absolute; może spowodować to?

Answer 1

przerwań na display: table/table-cell, więc musisz centered przy użyciu padding/50% wysokości linii o tej element's wysokości.

Zamiast tego używaj odpowiednio flexbox jak poniżej.

użyj:

.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

Możesz użyć CSS Flexbox.

rzucić okiem na poniższy kod:

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

Nadzieja to pomaga!

Answer 3

Nadanie position: absolute do diplay:table-cell zmusi go do być display: block i vertical-align: middle; nie działa z elemets blokowych

More Info

można owinąć 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>