如何居中导航菜单

Question

ive尝试了多种修复，并且ive尝试在w3school上寻找解决方案，如果他们已经有一些教程可以显示此内容，但是他们没有中心导航条码，并且ive尝试了一些诸如text-align的内容：在标题li上，但似乎不起作用。谢谢。

body {
	font-family: Impact, Charcoal, sans-serif;
	font-size: 16px;

}

/* global */
.container{
	width:80%;
	margin:auto;
	overflow:hidden;
}

/** header */

header{
	background-color:#1E90FF;
	color:#ffff;
	padding-top:30px;
	min-height:70px;
	border-spacing:5px;
	font-size:20px;
}

header a{
	color:#ffff;
	text-decoration:none;
	font-size:13px;	
	display:block;
	text-align: center;
	width:150px;
}

header ul{
    margin: :0;
	padding:0;
}

/* same thing as li */

header li{
	opacity: 0.4;
	float:left;
	display:inline;
	padding: 0 20px 0 20px;
}

header li:hover {
    color: white;
	opacity: 1;
}

/* centers the title*/
header #branding{
	text-align: center;
}

				<nav>
					<ul>
						<div id="hub">
							<li><a href="index.html">Home</a></li>
							<li><a href="Games.html">Games</a></li>
						</div>
					</ul>
				</nav>

Answer 1

文本对齐：以ul为中心就足够了。 尝试：

nav ul {
    text-align:center;
}

https://jsfiddle.net/contwz7s/

Answer 2

body {
	font-family: Impact, Charcoal, sans-serif;
	font-size: 16px;
  margin:0;
  padding:0;
}

ul {
  margin:0;
  padding:0;
}


#hub {
  display:flex;
  width:100vw;
  justify-content:space-around;
}

#hub li {
  width:auto;
  list-style:disc;
}


/* global */
.container{
	width:80%;
	margin:auto;
	overflow:hidden;
}

/** header */

header{
	background-color:#1E90FF;
	color:#ffff;
	padding-top:30px;
	min-height:70px;
	border-spacing:5px;
	font-size:20px;
}

header a{
	color:#ffff;
	text-decoration:none;
	font-size:13px;	
	display:block;
	text-align: center;
	width:150px;
}

header ul{
    margin: :0;
	padding:0;
}

/* same thing as li */

header li{
	opacity: 0.4;
	float:left;
	display:inline;
	padding: 0 20px 0 20px;
}

header li:hover {
    color: white;
	opacity: 1;
}

/* centers the title*/
header #branding{
	text-align: center;
}

<nav>
					<ul>
						<div id="hub">
							<li><a href="index.html">Home</a></li>
							<li><a href="Games.html">Games</a></li>
						</div>
					</ul>
				</nav>