Как центрировать div вертикально внутри абсолютно расположенного родительского div

Я пытаюсь получить синий контейнер в середине розового, однако кажетсяvertical-align: middle; не делает работу в этом случае.

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

Результат:

Expectation:

Пожалуйста, подскажите, как мне этого добиться.

Jsfiddle

Ответы на вопрос(9)

Ваш ответ на вопрос