Div, mutlak konumlandırılmış üst div içinde dikey olarak nasıl ortalanır


146

Pembe olanın ortasında mavi kap almaya çalışıyorum, ancak vertical-align: middle;bu durumda işi yapmıyor gibi görünüyor .

<div style="display: block; position: absolute; left: 50px; top: 50px;">
    <div style="text-align: left; position: absolute;height: 56px;vertical-align: middle;background-color: pink;">
        <div style="background-color: lightblue;">test</div>
    </div>
</div>

Sonuç:

resim açıklamasını buraya girin

Beklenti:

resim açıklamasını buraya girin

Lütfen bunu nasıl başarabileceğimi önerin.

Jsfiddle


1
Her position: absoluteyerde kullanmanızın bir nedeni var mı ?
Vucko

vertical-align: middle;ile çalışır display: inline-blockveya masa düzeni
ctf0

bu bağlantıyı kontrol edin: vanseodesign.com/css/vertical-centering ;)
Jordi Castilla

@Vucko evet - bu çok karmaşık düzenin basitleştirilmiş bir versiyonu olduğu için ön şarttır, ancak her iki üst div'de mutlak konum anahtar şeydir.
Vladimirs

@Vladimirs Ben sadece düşünebilirim margin-top: calc((56px - 16px) / 2), nerede 56px - parent height, 16px - element height/font-size- JSFiddle
Vucko

Yanıtlar:


333

Her şeyden önce vertical-align, yalnızca tablo hücreleri ve satır içi düzey öğeleri için geçerli olduğunu unutmayın .

İhtiyaçlarınızı karşılayan veya karşılamayan dikey hizalama elde etmenin birkaç yolu vardır. Ancak size favorilerimden iki yöntem göstereceğim :

1. transformve öğelerini kullanmatop

.valign {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    /* vendor prefixes omitted due to brevity */
}
<div style="position: absolute; left: 50px; top: 50px;">
    <div style="text-align: left; position: absolute;height: 56px;background-color: pink;">
        <div class="valign" style="background-color: lightblue;">test</div>
    </div>
</div>

Kilit nokta, üzerindeki bir yüzde değerinin , içeren bloğunkine topgöreli olmasıdır height; transformS üzerindeki bir yüzde değeri kutunun kendisinin (sınırlayıcı kutu) boyutuna göreli iken .

Eğer yaşarsanız yazı oluşturma sorunlarından (bulanık yazı), düzeltme eklemektir perspective(1px)için transformo olur böylece beyanı:

transform: perspective(1px) translateY(-50%);

transform IE9 + ' da CSS'nin desteklendiğini belirtmek gerekir .

2. inline-block(Sözde) öğelerini kullanma

Bu yöntemde, beyan inline-blockyoluyla ortada dikey olarak hizalanan iki kardeş elemanımız var vertical-align: middle.

Bunlardan biri ebeveynlerinden heightbirine 100%sahip, diğeri ise ortada hizalamak istediğimiz istenen elementimiz.

.parent {
    text-align: left;
    position: absolute;
    height: 56px;
    background-color: pink;
    white-space: nowrap;
    font-size: 0; /* remove the gap between inline level elements */
}

.dummy-child { height: 100%; }

.valign {
    font-size: 16px; /* re-set the font-size */
}

.dummy-child, .valign {
    display: inline-block;
    vertical-align: middle;
}
<div style="position: absolute; left: 50px; top: 50px;">
    <div class="parent">
        <div class="dummy-child"></div>
        <div class="valign" style="background-color: lightblue;">test</div>
    </div>
</div>

Son olarak, satır içi düzey öğeleri arasındaki boşluğu gidermek için mevcut yöntemlerden birini kullanmalıyız .


Bu faydalı ipuçları için teşekkürler. Projem için çalışıyordu. İyi işler.
Sedat Kumcu

İlk yöntem valignelemanı için olmalıdırdisplay: block
Oleg

transform: translateY(-50%);Bunu daha önce hiç görmedim, ama kusursuz çalışıyor. Gerçek hayat kurtarıcı.
Benny Bottema

55

bunu kullan :

.Absolute-Center {
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}

bu bağlantıya bakın: https://www.smashingmagazine.com/2013/08/absolute-horizontal-vertical-centering-css/


Bu nasıl asıl çözüm değil? Çok kolay ve işe yarıyor!
Mason

22
Bunun çalışması için heightözelliğin tanımlanması gerektiğini (px, em vb.) Unutmayın .
Vaidas

Ebeveynin içinde birden fazla div varsa ne olur? hepsi birbirinin üstüne yerleştirilmez mi?
psykid

"mutlak merkez" ile aynı seviyede bir çocuk daha işe yaramazsa
Pascut

18

İçeriğini ortalamak için mutlak konumlandırılmış div'inizde flex blox kullanın.

Örneğe bakın https://plnkr.co/edit/wJIX2NpbNhO34X68ZyoY?p=preview

.some-absolute-div {    
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;

  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center;

  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
}

12

Dikey ve yatay olarak ortalayın:

.parent{
  height: 100%;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}
.c{
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
}

3

display:table/ Kullanabilirsiniztable-cell;

.a{
   position: absolute; 
  left: 50px; 
  top: 50px;
  display:table;
}
.b{
  text-align: left; 
  display:table-cell;
  height: 56px;
  vertical-align: middle;
  background-color: pink;
}
.c {
  background-color: lightblue;
}
<div class="a">
  <div  class="b">
    <div class="c" >test</div>
  </div>
</div>


Teşekkürler, örneğiniz mükemmel çalışıyor, ancak .beksik position: absolute;olan, kodu daha net tutmak için dahil etmediğim diğer şeylerin görüntülenen özelliğini elde etmek için önemlidir. Ben kesinlikle konumlandırılmış hiçbir anlamı olan tablo hücresini yapar biliyorum ama belki muhafaza etmesine izin verecek bir başka yaklaşım yoktur position: absolute;hem de .ave .bsınıfları?
Vladimirs

a mutlak konum ve b (çocuk) boyut verirse, b içeriğin geri kalanına doğru mutlak konumdur. a bilinmeyen kalmak varsayalım mutlak içinde mutlak amacını anlamıyorum?
G-Cyrillus

1

Top nesnesini kullanmanın basit yolu.

örneğin: Mutlak eleman boyutu 60 piksel ise.

.absolute-element { 
    position:absolute; 
    height:60px; 
    top: calc(50% - 60px);
}

2
Kullanmak calcyararlıdır, ancak top: calc(50% - 30px)bunun aslında merkezlenmesi gerekir.
brainbag

1

Ek basit bir çözüm

HTML:

<div id="d1">
    <div id="d2">
        Text
    </div>
</div>

CSS:

#d1{
    position:absolute;
    top:100px;left:100px;
}

#d2{
    border:1px solid black;
    height:50px; width:50px;
    display:table-cell;
    vertical-align:middle;
    text-align:center;  
}

0

Lütfen benzer bir sorunun bu cevabını kontrol edin.

Bu benim bulduğum en kolay yol.

https://stackoverflow.com/a/26079837/4593442

NOT. Display kullandım : -webkit-flex; ekran yerine : flex; safari içinde test etmek için.

DİPNOT. Ben sadece acemi biriyim, açıkça deneyimli birinden yardım paylaşıyorum.


0

Bunu display:table;üst div ve display: table-cell; vertical-align: middle;alt div öğelerinde kullanarak yapabilirsiniz

<div style="display:table;">
      <div style="text-align: left;  height: 56px;  background-color: pink; display: table-cell; vertical-align: middle;">
          <div style="background-color: lightblue; ">test</div>
      </div>
  </div>


3
cevabınızın iyi olması muhtemeldir, ancak kodunuzun ne yaptığına dair bir açıklama ekleyerek onu çok geliştirebilirsiniz ...
DaFois
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.