一方法
外层嵌套<table>为其设置margin:0 auto;达到水平居中：
Html代码
<html>
<head>
<style type="text/css">
.wrap{width:900px; height:1000px; background:#999; margin:0 auto;}
.uuu a{ width:60px; height:30px; display:block}
.uuu li{float:left;}
.tb{margin:0 auto;}
</style>
</head>
<body>
<div class="wrap">
<table class="tb">
<tr><td>
<ul class="uuu">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
</ul>
</td></tr>
</table>
</div>
</body>
</html>
<html>
<head>
<style type="text/css">
.wrap{width:900px; height:1000px; background:#999; margin:0 auto;}
.uuu a{ width:60px; height:30px; display:block}
.uuu li{float:left;}
.tb{margin:0 auto;}
</style>
</head>
<body>
<div class="wrap">
<table class="tb">
<tr><td>
<ul class="uuu">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
</ul>
</td></tr>
</table>
</div>
</body>
</html>
二、方法
改变块级元素的display为inline类型，然后使用text-align:center来实现居中：
Html代码
三、方法
给父元素设置float,然后父元素设置position:relative和left:50%,子元素设置position:relative和left:-50%来实现水平居中。
Html代码
<html>
<head>
<style type="text/css">
.wrap{width:900px; height:1000px; background:#999; margin:0 auto;}
ul{list-style:none; margin:0; padding:0;}
.test{clear:both; padding-top:5px; float:left; position:relative; left:50%;}
.test li{float:left; display:inline; margin-right:5px; position:relative; left:-50%;}
.test a:hover{background:#fff; color:#316ac5;}
</style>
</head>
<body>
<div class="wrap">
<ul class="test">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
</ul>
</div>
</body>
</html>
<html>
<head>
<style type="text/css">
.wrap{width:900px; height:1000px; background:#999; margin:0 auto;}
ul{list-style:none; margin:0; padding:0;}
.test{clear:both; padding-top:5px; float:left; position:relative; left:50%;}
.test li{float:left; display:inline; margin-right:5px; position:relative; left:-50%;}
.test a:hover{background:#fff; color:#316ac5;}
</style>
</head>
<body>
<div class="wrap">
<ul class="test">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
</ul>
</div>
</body>
</html>
以上即为实现不确定宽度时，元素实现水平居中的三种方法。另有相关文章：未知高度垂直居中解决的方法，有兴趣的朋友比较一下方法有哪些不同。