質問

ピンクのコンテナの真ん中に青のコンテナを表示させたいのですが 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>

結果

期待する。

どうすれば実現できるのか、提案してください。

Jsfiddle

解決方法は？

まず最初に vertical-align は、テーブルセルとインラインレベル要素にのみ適用されます。

垂直方向のアライメントを実現する方法はいくつかありますが、あなたのニーズに合うかどうかはわかりません。しかし、ここでは 2 メソッド をお気に入りから選んでいます。

1. 使用方法 transform と 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 を含むブロックのパーセント値です。 transform は、ボックス自体のサイズ（バウンディングボックス）に対する相対値です。

もし、あなたが フォントレンダリングの問題 (フォントがぼやける)、その修正方法は perspective(1px) を transform という宣言になるように。

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

注目すべきは、CSS transform はIE9+でサポートされています .

2. 使用方法 inline-block (擬似）要素

このメソッドでは、2つの兄弟である inline-block で縦に並べられ、その真ん中が vertical-align: middle を宣言しています。

そのうちの1つは height の 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>

最後に インラインレベル要素間のギャップを取り除くために利用できるメソッドです。 .