html - 使用绝对定位和百分比高度垂直对齐 div

Question

<div id="logo">
    <div class="navigation-left menu"></div>
</div>

#logo {
    position: relative;
    background: #0099ff url("../img/logo.png") no-repeat center center;
    background-size: auto 55%;
    height: 18%;
}

.navigation-left {
    background-repeat: no-repeat;
    background-position: center center;
    height: 3%;
    width: auto;
    position: absolute;
    padding: 3%;
    box-sizing: border-box;
}

.menu {
    background-image: url('../img/3lines.png');
    background-size: cover;
}

我正在尝试将 .navigation-left 垂直居中，以便它位于 #logo 的中间。据我所知，我需要在 .navigation-left 上使用绝对定位，以便我可以将 auto 用于 width 属性。这排除了 vertical-align，因为它将 div 的 display 设置为 block。有什么想法吗？

Answer 1

1] 设置position:absolute; top:50%;。

2] 设置margin-top:-1.5%; 或元素高度的一半。

代码:

.navigation-left {
    position: absolute;
    top: 50%;
    margin-top:-1.5%; /* Should be set to half of the height */
    background-repeat: no-repeat;
    background-position: center center;
    height: 3%;
    width: auto;
    padding: 3%;
    box-sizing: border-box;
}