如何居中對齊CSS導航菜單？

Question

有人可以幫我嗎？我正在嘗試以我的導航菜單爲中心。我嘗試了不同的東西，但沒有任何作用，我真的不知道該怎麼做。我真的很感激幫助。提前致謝！

nav { 
display: inline-block; 
list-style-type: none; 
float: left; 
width: 100%; 
height: 102px; 
text-align: center; 
} 

nav > ul { 
float:right; 
width:100%; 
height:102px; 
background:#222; 
border-radius: 10px 10px 0px 0px; 
} 

nav > ul > li { 
float:left; 
width:auto; 
margin-right:10px; 
line-height:102px; 
} 

nav > ul li a { 
padding:50px; 
color:white; 
font-family:helvetica, sans-serif; 
} 

nav > ul > li > ul { 
background:#222; 
opacity:0; 
transition:opacity 1s; 
-webkit-transition:opacity 1s; 
-moz-transition:opacity 1s; 
-o-transition:opacity 1s; 
-ms-transition:opacity 1s; 
border-radius: 0px 0px 10px 10px; 
} 

nav > ul > li:hover > ul { 
opacity:1; 
} 

HTML

<div> 
<nav> 
    <ul> 
    <li> <a href="#">Hjem</a> 
    <ul> 
    <li><a href="#">Sub1</a></li> 
    <li><a href="#">Sub2</a></li> 
    <li><a href="#">Sub3</a></li> 
    </ul> 
    </li> 
    <li><a href="#">Bilder</a></li> 
    <li><a href="#">Video</a></li> 
    <li><a href="#">Design</a></li> 
    </ul> 
</nav> 
</div> 

Answer 1

這裏是我做的。

#outer{ 
    width:100%; 
    height: 102px; 
    text-align: center; 
    background:#222; 
    border-radius: 10px 10px 0px 0px; 
} 
nav { 
    display: inline-block; 
    list-style-type: none; 
    margin: 0 auto; 
} 

nav > ul > li { 
    float:left; 
    width:auto; 
    margin-right:10px; 
    line-height:102px; 
} 

nav > ul li a { 
    padding:50px; 
    color:white; 
    font-family:helvetica, sans-serif; 
} 

nav > ul > li > ul { 
    background:#222; 
    opacity:0; 
    transition:opacity 1s; 
    -webkit-transition:opacity 1s; 
    -moz-transition:opacity 1s; 
    -o-transition:opacity 1s; 
    -ms-transition:opacity 1s; 
    border-radius: 0px 0px 10px 10px; 
} 

nav > ul > li:hover > ul { 
    opacity:1; 
} 

而你只需要給div一個ID。

<div id="outer">