Navbarのメニュー項目が垂直に中央に配置されています

Question

赤いコンテナ（高さ70p）に緑のメニュー項目を垂直に中央に表示したいのですが。 私はマージンで遊ぶことでこれを達成できましたが、これは理想的な解決策ではありません。赤い容器の高さに関係なく、これを達成するための「最もクリーンな」方法は何でしょうか？ 多くのおかげで、

.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 */ 

     } 

Answer 1

これはあなたの割り当てを完了する方法のアイデアを与える必要があります。

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>

Answer 2

は、このスタイルを追加します。

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