如何在绝对定位的父 div 内垂直居中 div - How to center div vertically inside of absolutely positioned parent div

问题：

I am trying to get blue container in the middle of pink one, however seems vertical-align: middle;我试图将蓝色容器放在粉红色容器的中间，但似乎vertical-align: middle; doesn't do the job in that case.在这种情况下不做这项工作。

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

Result:结果：

Expectation:期待：

Please suggest how can I achieve that.请建议我如何实现这一目标。

Jsfiddle提琴手

---

解决方案：

参考一： https://en.stackoom.com/question/1vOTE
参考二： https://stackoom.com/question/1vOTE