CSS使用绝对容器中的图像和按钮定位相对div

Question

我正在尝试创建一个通用的授权对话框，它看起来如下：

此对话框应始终位于屏幕中间。顶部占父母身高的39％，其中包含的图像应该占这个39％的90％。我尝试为图像设置CSS如下：

.guard-icon
{
height:90%;
width:auto;
}

但在这种情况下，图像占90％不是来自它的父级（90％来自39％），而90％来自整个对话框高度。如下：

我也尝试设置其他div的高度（17％和44％），但是为什么它的高度= 0。 我想我选择了一种错误的方式来实现这种身份验证对话框，那么实现它的方法是什么？ 我的HTML：

<div id="sign-in">
    <div class="sign-in-top">
    <img class="guard-icon" src="img/icons/shield_icon.svg"/>
    </div>

    <div class="sign-in-middle">

    </div>

    <div class="sign-in-bottom">

        </div>
    </div>
</div>

和CSS：

#sign-in {
    width: 29%;
    height: 70%;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    text-align: center;
    display:table;

    -webkit-box-shadow: 0px 0px 7px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px 0px 7px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         0px 0px 7px 0px rgba(50, 50, 50, 0.75);
}
.guard-icon
{
    height:90%;
    padding-top: 3%;
}
.sign-in-top
{
    width:100%;
    height:39%;
    position: relative;
}
.sign-in-middle
{
    width:100%;
    height:17%;
    position: relative;
}
.sign-in-bottom
{
    width:100%;
    height:44%;
    position: relative;

}

Answer 1

将display的{​​{1}}设置为#sign-in而不是表格。

SAMPLE

block