在父div中垂直对齐div？

Question

如何将caption div垂直居中置于caption-wrap？

http://jsfiddle.net/0j5e06mt/

HTML：

<div class="caption-wrap">

    <div class="caption">
        <p>test</p>
        <p>test</p>
    </div>

</div>

CSS：

.caption-wrap {background:red;height:120px;width:100%}
.caption {background:blue;text-align:center}

Answer 1

尝试：

.caption{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

来源：http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/