在父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/