How to center align CSS navigation menu? - html

Question

Can someone please help me? I'm trying to center my navigation menu. I have tried different things, but nothing works, and i really don't know what to do. I would really appreciate help. thanks in advance!
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> Hjem
<ul>
<li>Sub1</li>
<li>Sub2</li>
<li>Sub3</li>
</ul>
</li>
<li>Bilder</li>
<li>Video</li>
<li>Design</li>
</ul>
</nav>
</div>

Answer 1

Here is what I did.
#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;
}
And you just need to give an ID to the div.
<div id="outer">