divのセンターリストを中心にするには

Question

どのようにしてナビのリストを中央に置くことができますか？コンテンツのリスト、 "nav"の中心とliの高さ、navの高さと同じにしたいと思います。それは英語で私の最初の投稿ですので、理解してください。

header 
 
{ 
 
    width: 100%; 
 
    color: white; 
 
    text-align: center; 
 
    font-size: 4.5vw; 
 
} 
 
nav 
 
{ 
 
    background: #3095d3; 
 
    width: 100%; 
 
    text-align: center; 
 
    display: inline-flex; 
 
} 
 
ul 
 
{ 
 
    list-style-type: none; 
 
    margin: 0; 
 
} 
 
ul > li 
 
{ 
 
    padding: 1vw; 
 
    float: left; 
 
    font-size: 2.5vw; 
 
} 
 

 
li:hover 
 
{ 
 
    background: #50B5F3; 
 
}

<header> 
 
    Anon 
 
    <nav> 
 
     <ul> 
 
     <li>cont1</li> 
 
     <li>cont2</li> 
 
     <li>cont3</li> 
 
     <li>cont4</li> 
 
     </ul> 
 
    </nav> 
 
    </header>

Answer 1

あなたは、単にあなたのul要素にmargin: autoを追加することができます。あなたはnavにinline-flexを使用しているので

Fiddle here

Answer 2

あなただけjustify-content: centerを追加することができます。

navはおそらくちょうどflexであるはずですが、width: 100%も削除できます。

header { 
 
    width: 100%; 
 
    color: white; 
 
    text-align: center; 
 
    font-size: 4.5vw; 
 
} 
 

 
nav { 
 
    background: #3095d3; 
 
    width: 100%; 
 
    display: inline-flex; 
 
    justify-content: center; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
ul > li { 
 
    padding: 1vw; 
 
    font-size: 2.5vw; 
 
    float: left; 
 
} 
 

 
li:hover { 
 
    background: #50B5F3; 
 
}

<header> 
 
    Anon 
 
    <nav> 
 
    <ul> 
 
     <li>cont1</li> 
 
     <li>cont2</li> 
 
     <li>cont3</li> 
 
     <li>cont4</li> 
 
    </ul> 
 
    </nav> 
 
</header>