垂直居中的Navbar菜單項

我希望我的綠色菜單項垂直居中在紅色容器（高度爲70px）。我已經能夠通過玩邊緣來實現這一點，但這不是一個理想的解決方案。無論紅色容器的高度如何，實現這個目標的「最乾淨」的方式是什麼？非常感謝，垂直居中的Navbar菜單項

.nav-wrap { 
    width:100%; 
    max-width:800px; 
    margin:0px auto; 
} 

#nav.affix { 
    position: fixed; 
    top: 0; 
    width: 100%; 
    height: 70px; 
    background: red; 
    z-index:10; 
    opacity: 0.9; 
    left: 0; 
    margin-top: 0; 
    animation: fadein 2s; 
    -moz-animation: fadein 2s; /* Firefox */ 
    -webkit-animation: fadein 2s; /* Safari et Chrome */ 
    -o-animation: fadein 2s; /* Opera */ 

     }

來源

2016-03-28 Greg

問題尋求幫助的代碼必須包括必要的重現它最短的代碼**在問題本身**最好在[**堆棧片段**]（https：//開頭博客.stackoverflow.com/2014/09 /引入可運行的JavaScript-CSS-和HTML的代碼段/）。請參閱[**如何創建最小，完整和可驗證的示例**]（http://stackoverflow.com/help/mcve） –

這應該給出如何完成任務的想法。

nav{ 
 
    width: 100%; 
 
    display: table; 
 
    
 
    position: fixed; 
 
    top: 0px; 
 
    left: 0px; 
 
    
 
    background: #ff0000; 
 
} 
 
nav > div{ 
 
    height: 70px; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    
 
} 
 
nav > div > label{ 
 
    color: #ffffff; 
 
    padding: 2.5px 5px; 
 
    background: green; 
 
    
 
    -webkit-border-radius: 10px; 
 
     -moz-border-radius: 10px; 
 
      border-radius: 10px; 
 
}

<nav> 
 
    <div><label>Who are We</label></div> 
 
    <div> <label>Services</label></div> 
 
</nav>

來源

2016-03-28 17:45:20 Gacci

添加這種風格：

.green-menu-parent { 
    position: relative; 
} 
.green-menu { 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
}

來源

2016-03-28 17:43:03 moonshinecool

垂直居中的Navbar菜單項

回答

相關問題