Html 导航栏水平+；垂直居中

如何使导航栏水平和垂直居中

以下是我的导航栏的屏幕截图：

HTML代码

<div class="content">
    <div class="nav">
        <ul>
            <li><a href="#" title="Klicken Sie um zur Startseite zu gelangen">Startseite</a></li>
            <li><a href="#" title="Klicken Sie um zur Startseite zu gelangen">Leistungen</a></li>
            <li><a href="#" title="Klicken Sie um zur Startseite zu gelangen">Referenzen</a></li>
            <li><a href="#" title="Klicken Sie um zur Startseite zu gelangen">Kontakt</a></li>
        </ul>
    </div>
</div>

.nav {
    background-color: #CCCCCC;
    font-family: 'Source Sans Pro', sans-serif;
    height: 45px;
    padding-left: 170px;
}
.content {
    width: 800px;
    height: 500px;
    margin:0 auto;
}

.nav ul li {
    list-style-type: none;
    text-align: center;
    width: auto;
    float: left;
    padding-left: 10px;
    padding-right: 10px;
    margin:0 auto;
}
.nav a {
display: block;
    padding-top: 2px;
    padding-bottom: 2px;
    color: #000000;
text-decoration: none;

}

我已经让它水平居中，但我怎么能垂直居中呢

我希望你的回答

---

感谢Felix

如果您只想使用css，则需要将其设置为“绝对位置”、“顶部和左侧”为50%，并将“顶部边距”和“左侧边距”设置为-height/2和-width/2

position: absolute;
top: 50%;
left: 50%;
height: 45px;
margin-top: -22.5px;
width: 440px;
margin-left: -220px;

如果要将居中垂直/水平放置在其他div内，请使用position:relative设置该div

---

我希望这能对您有所帮助。

这里是我为类似的答案创建的。有3种方法可以垂直对齐内容。根据我的说法，这里最适合的方法是线高度法。

有多种方法，请参阅以下文章：

我最喜欢的方法是使用

display:table

（在容器上）和

显示：表格单元格

与

垂直对齐：中间

（在项目本身上）相结合，如本小提琴所示：

---

垂直对齐的单线近似：

.nav{margin top:45%；}

（我想对丹尼尔·罗吉的回答加上这个评论，但我没有足够的声望点…）