不确定宽度元素居中

方法一

<div class="wrap">
		<table>
			<tbody>
				<tr>
					<td>
						<ul>
							<li><a href="">1</a></li>
							<li><a href="">1</a></li>
							<li><a href="">1</a></li>
							<li><a href="">1</a></li>
							<li><a href="">1</a></li>
							<li><a href="">1</a></li>
							<li><a href="">1</a></li>
							<li><a href="">1</a></li>
							<li><a href="">1</a></li>
							<li><a href="">1</a></li>
							
						</ul>
					</td>
				</tr>
			</tbody>
		</table>
	</div>

　　

.wrap{ 1000px;height: 300px;margin: 0 auto;}
table{margin: 0 auto;}
li{float: left;margin-right: 5px;}
table可以在不确定宽度的情况下用margin:0 auto;但用了一些无意义的标签。

　　

方法二

	<div class="wrap">
		<ul>
			<li><a href="">1</a></li>
		</ul>
		<ul>
			<li><a href="">1</a></li>
			<li><a href="">1</a></li>
			<li><a href="">1</a></li>
		</ul>
		<ul>
			<li><a href="">1</a></li>
			<li><a href="">1</a></li>
			<li><a href="">1</a></li>
			<li><a href="">1</a></li>
			<li><a href="">1</a></li>
		</ul>
	</div>
.wrap{ 500px;height: 300px;}
ul{text-align: center;}
li{display: inline;}

主要问题就是li设置成了inline.不能设置宽高

　　

方法三

	<div class="wrap">
		<ul>
			<li><a href="">1</a></li>
		</ul>
		<ul>
			<li><a href="">1</a></li>
			<li><a href="">1</a></li>
			<li><a href="">1</a></li>
		</ul>
		<ul>
			<li><a href="">1</a></li>
			<li><a href="">1</a></li>
			<li><a href="">1</a></li>
			<li><a href="">1</a></li>
			<li><a href="">1</a></li>
		</ul>
	</div>
.wrap{ 500px;height: 300px;}
ul{position: relative;left: 50%;clear: both;float: left;}
li{position: relative;left: -50%;display: inline;}
有点麻烦额。。