Align div vertically within parent div?

Question

How do I position my caption div vertically centre within 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

Try:

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

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