如何居中对齐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">