So zentrieren Sie div vertikal innerhalb des absolut positionierten übergeordneten div

Ich versuche, blauen Behälter in der Mitte von rosa zu bekommen, scheint jedochvertical-align: middle; erledigt den Job in diesem Fall nicht.

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

Ergebnis

Erwartung

Bitte schlagen Sie vor, wie ich das erreichen kann.

Jsfiddle

Antworten auf die Frage(18)

Ihre Antwort auf die Frage