Saya mencoba untuk mendapatkan wadah biru di tengah-tengah yang merah muda, namun tampaknya vertical-align: middle;tidak berhasil dalam kasus itu.

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

Hasil:

Harapan:

Tolong sarankan bagaimana saya bisa mencapai itu.

Jsfiddle

Pertama-tama catatan yang vertical-alignhanya berlaku untuk sel tabel dan elemen tingkat inline.

Ada beberapa cara untuk mencapai keberpihakan vertikal yang mungkin memenuhi atau tidak memenuhi kebutuhan Anda. Namun saya akan menunjukkan kepada Anda dua metode dari favorit saya:

1. Menggunakan transformdantop

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

Poin kuncinya adalah bahwa nilai persentase pada toprelatif terhadap heightblok yang berisi; Sedangkan nilai persentase pada transforms relatif terhadap ukuran kotak itu sendiri (kotak pembatas).

Jika Anda mengalami masalah rendering font (font buram), perbaikannya adalah menambahkan perspective(1px)ke transformdeklarasi sehingga menjadi:

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

Perlu dicatat bahwa CSS transform didukung di IE9 + .

2. Menggunakan inline-blockelemen (pseudo-)

Dalam metode ini, kami memiliki dua inline-blockelemen saudara yang disejajarkan secara vertikal di tengah oleh vertical-align: middledeklarasi.

Salah satu dari mereka memiliki salah heightsatu 100%dari induknya dan yang lainnya adalah elemen yang kami inginkan yang ingin kami selaraskan di tengah.

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

Akhirnya, kita harus menggunakan salah satu metode yang tersedia untuk menghilangkan celah antara elemen-elemen inline-level .

Gunakan ini :

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

lihat tautan ini: https://www.smashingmagazine.com/2013/08/absolute-horizontal-vertical-centering-css/

Gunakan flex blox di div Anda yang diposisikan tidak tepat untuk memusatkan kontennya.

Lihat contoh 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;
}

Pusatkan secara vertikal dan horizontal:

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

Anda dapat menggunakan display:table/table-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>

Ini cara sederhana menggunakan objek Top.

misalnya: Jika ukuran elemen absolut adalah 60px.

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

Solusi sederhana tambahan

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;  
}

Silakan periksa jawaban ini untuk masalah serupa.

Sejauh ini cara termudah yang saya temukan.

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

CATATAN. Saya menggunakan tampilan: -webkit-flex; bukannya tampilan: flex; untuk pengujian di dalam safari.

FOOTNOTE. Saya seorang pemula saja, berbagi bantuan dari seseorang yang jelas berpengalaman.

Anda dapat melakukannya dengan menggunakan display:table;di div orangtua dan display: table-cell; vertical-align: middle;di div anak

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