导航栏水平+垂直居中答案

【问题标题】：Navbar horizontal + vertical centered导航栏水平+垂直居中
【发布时间】：2014-03-07 22:01:01
【问题描述】：

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

这是我的导航栏截图：http://puu.sh/7luYN

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>

CSS 代码

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

}

我已经让它水平居中，但我怎样才能将它垂直居中？

希望得到你的回答，

谢谢菲利克斯

【问题讨论】：

标签： html css center vertical-alignment

【解决方案1】：

这是我为类似答案创建的 PEN。有 3 种方法可以垂直对齐您的内容。在我看来，最适合这里的是行高方法。

【讨论】：

【解决方案2】：

有多种方法可以做到，请参阅以下文章：http://phrogz.net/CSS/vertical-align/

我最喜欢的方式是使用display: table;（在容器上）和display: table-cell 结合vertical-align: middle（在项目本身上），如下图所示：

http://jsfiddle.net/G6vxs/

【讨论】：

【解决方案3】：

如果你只想使用 css，你需要设置它的绝对位置，top 和 left 为 50%，并将 margin-top 和 margin-left 设置为 -height/2 和 -width/2。

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

http://jsbin.com/galapudo/1/edit?html,output

如果您想将居中的垂直/水平放置在其他 div 中，请将该 div 设置为 position:relative;

希望对你有所帮助。

【讨论】：

【解决方案4】：

垂直对齐的单行近似值：.nav {margin-top : 45%;} （我想将此添加为对 Daniel Rogi 答案的评论，但我没有足够的声望点...）

【讨论】：