相对于父 div 垂直对齐 div

Question

我在div（父级）中有div（孩子）。从父级的高度为 144 到 318（最小高度和最大高度）。这取决于窗口的大小。

我希望父母中的每个孩子都垂直对齐。我尝试了行高，但由于我没有固定的高度，我找不到答案。

有什么建议怎么做吗？

文件：

<div id="mainDivPad">
    <div id="ipadPad">
        BILD
    </div>
</div>

CSS 文件：

#mainDivPad{
position: relative;
width:100%;
height:100%;
min-height:144px;
max-height:318px;
background-color:#f9e2ef;
}
#ipadPad{
float: right;
margin-right: 7%;
}

编辑：

当窗口大小改变时，孩子必须"移动"并变得更小或更高。（我知道更小更高的东西是另一个话题，不应该是这里的问题）

Answer 1

使用行高进行垂直对齐

线高：

继承或线高：父潜高度

Answer 2

你可以通过绝对定位来做到这一点：

#ipadPad {
    margin-right: 7%;
    margin-top: -10px;
    position: absolute;
    right: 0;
    top: 50%;
}

margin-top必须是元素#ipadPad的一半高度。

JSFiddle 上的现场演示