Estoy tratando de obtener un contenedor azul en medio del rosa, sin embargo, parece vertical-align: middle;que no funciona en ese caso.

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

Resultado:

Expectativa:

Sugiera cómo puedo lograr eso.

Jsfiddle

En primer lugar, tenga en cuenta que vertical-alignsolo es aplicable a celdas de tabla y elementos de nivel en línea.

Hay dos formas de lograr alineaciones verticales que pueden o no satisfacer sus necesidades. Sin embargo, te mostraré dos métodos de mis favoritos:

1. Usando transformytop

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

El punto clave es que un valor de porcentaje en topes relativo al del heightbloque contenedor; Mientras que un valor porcentual en transforms es relativo al tamaño del cuadro en sí (el cuadro delimitador).

Si experimenta problemas de representación de fuente (fuente borrosa), la solución es agregar perspective(1px)a la transformdeclaración para que se convierta en:

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

Vale la pena señalar que CSS transform es compatible con IE9 + .

2. Usando inline-block(pseudo-) elementos

En este método, tenemos dos inline-blockelementos hermanos que están alineados verticalmente en el medio por vertical-align: middledeclaración.

Uno de ellos tiene uno heightde 100%sus padres y el otro es nuestro elemento deseado cuyo que queríamos alinear en el medio.

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

Finalmente, debemos usar uno de los métodos disponibles para eliminar la brecha entre los elementos de nivel en línea .

utilizar este :

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

consulte este enlace: https://www.smashingmagazine.com/2013/08/absolute-horizontal-vertical-centering-css/

Usa flex blox en tu div posicionado para centrar su contenido.

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

Centro vertical y horizontalmente:

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

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

Aquí hay una manera simple de usar el objeto Top.

Por ejemplo: si el tamaño absoluto del elemento es 60px.

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

Una solución simple adicional

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

Verifique esta respuesta a un problema similar.

Esta es, con mucho, la forma más fácil que he encontrado.

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

NOTA. Solía pantalla: -webkit-flex; en lugar de mostrar: flex;para probar dentro de safari.

NOTA. Solo soy un novato, comparto la ayuda de alguien que tiene una experiencia clara.

Puede hacerlo utilizando display:table;en div padre y display: table-cell; vertical-align: middle;en div hijo

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