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%;的{{1}}或一半。

代码：

height

Answer 2

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

这是一个使用transforms

动态的CSS3解决方案

JSfiddle Demo（小提琴更新了重新标题，但相关的CSS仍适用）

<强> HTML

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

<强> CSS

* {
        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;

}

垂直对齐div与绝对定位和百分比高度

2 个答案: