在父div内垂直对齐div？ [复制]

Question

如何在caption-wrap 内垂直居中放置caption div？

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/