我试图将蓝色容器放在粉色容器中间，但是似乎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>

Result:

期待：

请建议我如何才能实现这一目标。

Jsfiddle http://jsfiddle.net/kqmp1z9m/

首先请注意vertical-align仅适用于表格单元格和内联级元素。

有几种方法可以实现垂直对齐，这些方法可能满足也可能不满足您的需求。不过我会告诉你two https://stackoverflow.com/questions/8508275/how-to-center-a-position-absolute-element/25776315#25776315 methods https://stackoverflow.com/questions/18516317/vertically-align-an-image-inside-a-div-with-responsive-height/18516474#18516474从我的最爱：

1. 使用transform and top

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

关键点是百分比值top是相对于height包含块的；虽然百分比值transforms 相对于盒子本身（边界框）的大小。

如果你经历过字体渲染问题 http://www.useragentman.com/blog/2014/05/04/fixing-typography-inside-of-2-d-css-transforms/（字体模糊），修复方法是添加perspective(1px) to the transform声明所以它变成：

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

值得注意的是CSStransform IE9+支持 https://developer.mozilla.org/en-US/docs/Web/CSS/transform#Browser_compatibility.

2. 使用inline-block（伪）元素

在这个方法中，我们有两个兄弟姐妹inline-block元素在中间垂直对齐vertical-align: middle宣言。

其中一个有一个height of 100%其父元素的一个，另一个是我们想要的元素，我们希望将其对齐在中间。

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

最后，我们应该使用其中之一消除行内元素之间间隙的可用方法 https://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements.