Html 将div与绝对位置和百分比高度垂直对齐 #标志{ 位置：相对位置； 背景：#0099ff url（“../img/logo.png”）无重复中心； 背景尺寸：自动55%； 身高：18%； } .导航左{ 背景重复：无重复； 背景位置：中心； 身高：3%； 宽度：自动； 位置：绝对位置； 填充：3%； 框大小：边框框； } .菜单{ 背景图像：url（'../img/3lines.png'）； 背景尺寸：封面； } >我试图垂直中心>代码>导航左下/代码>，它位于中的标识>代码>。据我所知，我需要在上使用绝对定位。导航左侧，以便我可以对宽度属性使用自动。这排除了将div的显示设置为块的垂直对齐。有什么想法吗？1]设置位置：绝对顶部：50%

2]设置

页边距顶部：-1.5%或元素
高度的一半

代码：

如果菜单div中有实际内容，则必须手动（或通过JS）计算和设置负边距

下面是一个CSS3解决方案，它是使用
转换的动态解决方案

（FIDLE更新了re%标题，但相关CSS仍然适用）

HTML

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

Jsfiddle请，因为如果没有百分比以外的一些实际数字，我看不出这是可行的。为什么你在一个没有背景的类上有背景属性，除了在另一个类中设置的属性外？你能制作一个包含图像完整URL的JSFIDLE吗？你正在设置
。导航左
到
#logo
高度的3%，这是什么容器的18%？父容器是如何定义的<代码>左侧导航
为空，并设置为自动宽度。为什么？
.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;
}

<div id="logo">
    <div class="navigation-left menu">Lorem ipsum dolor sit.</div>
</div>

* {
        box-sizing: border-box;
}

html, body {
    height:100%; /* not required but guessed at based on % height in OP */
}

#logo {
    position: relative;
    background: gray;
    height: 100px; /* any value */
}

.navigation-left {
    position: absolute;
    top:50%;
    -webkit-transform:translate(0%, -50%);
    height:3%;
    width: auto;
    padding: 3%;
    background-color: blue;

}