Neden `pozisyon:;: middle` mutlak` `dikey-align yok?

Question

metin center böyle kod gösterisi aşağıda div merkezinde yer almaktadır.

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

Şimdi .Absolute-Center ait css bir çizgi position:absolute; ekleyin.

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

metin center, neden position:absolute; bu neden olabilir şimdi div merkezinde değildi?

Answer 1

position: absolute, display: table/table-cell numaralı iletişimde kesilir, bu nedenlepadding/50% satır yüksekliğindeki element's yüksekliğini kullanmanız gerekir.

yerine aşağıda gibi düzgün flexbox kullanın.

Kullanım Bu:

.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

Sen CSS flexbox'a kullanabilirsiniz.

aşağıdaki kodu göz at:

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

Umut bu yardımcı olur!

Answer 3

More Info

sen sarar position: absolutediplay:table-cell için display: block olmasını zorlar verilmesi ve vertical-align: middle; blok elemets çalışmaz 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>