html - 将div与绝对位置和百分比高度垂直对齐

<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。有任何想法吗？

最佳答案

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

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

码：

.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;
}

关于html - 将div与绝对位置和百分比高度垂直对齐，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23311073/