父容器height不确定的情况下，实现子元素垂直方向自适应居中

效果图：



上面卡片形状的区域，height是不固定的。因为width是根据屏幕的宽度自适应的，然后height和width保持固定比例。所以在PC上，height可能是300px，但是在手机上就只有100px。

希望中间的剩余金额保持垂直居中显示，方法有很多，我用的是绝对定位 + 百分比的方法。关键CSS如下：

<div id="parent">
<div>季度卡 vip86900006</div>
<div id="son">3次</div>
</div>

#parent {
position: absolute;
width: 50%;
}

#son {
position: absolute;
top: 40%;
width: 100%;
text-align: center;
}

主要就是因为父容器的高度不确定，所以top不能写成固定的值，可以写成百分比，这样就会根据父容器的宽度自适应。如果父容器的高度是固定的值，那top也写成固定值就行了