導航欄水平+垂直居中

Question

如何居中導航欄水平居中和垂直居中？

這裏是我的導航欄的截圖：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; 

}

我已經把它居中置於水平位置，但我怎樣才能將它居中置於垂直位置？

我希望你的答案，

感謝菲利克斯

Answer 1

有多種方式做到這一點，請參閱下面的文章：http://phrogz.net/CSS/vertical-align/

我最喜歡的方式是使用display: table;（集裝箱）和display: table-cell與vertical-align: middle聯合（項目本身）如本小提琴所示：

http://jsfiddle.net/G6vxs/

Answer 2

如果你想只使用CSS，你需要與位置絕對頂成立，並留下50％，設置margin-top和margin-left to -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：相對的;

我希望這可以幫助你。

Answer 3

這是一個PEN我創造了一個類似的答案。有三種方法可以垂直對齊您的內容。根據我的說法，這裏最適合的是線高度方法。

Answer 4

用於垂直對齊單行近似：.nav {margin-top : 45%;} （我想補充這是丹尼爾Rogi的答案評論，但我沒有足夠的REPU配點......）