不确定宽度的块级元素的水平居中

方法一

用table标签，但缺点是增阿基了无语义标签，加深了标签的嵌套层数。

<style>

body,ul{margin:0;padding:0;}
table{margin: 0 auto;}
.test li{width:20px;height:20px;background:red;float:left;margin-right:5px;}
</style>

 

<div class="warp">
<table>
<tbody>
<tr>
<td>
<ul class="test">
<li>1</li>
</ul>
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>
<ul class="test">
<li>2</li>
<li>2</li>
</ul>
</td>
</tr>
</tbody>
</table><table>
<tbody>
<tr>
<td>
<ul class="test">
<li>3</li>
<li>3</li>
<li>3</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>