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

<style>
ul{list-style:none;margin:0;padding:0;}
table{margin:0 auto;}
.test li{float:left;display:inline;margin-right:5px;}
.test a{float:left;width:20px;height:20px;text-align:center;line-height:20px;background:#316ac5;color:#fff;border:1px solid #316ac5;text-decoration:none;}
.test a:hover{background:#fff;color:#315ac5}
</style>
<div class="warp">
<table>
    <tbody>
        <tr><td class="warp">
            <ul class="test">
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
            </ul> 

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

        </td></tr>
    </tbody>
</table>
</div>

<style>
.warp2{background:#000;width:500px;height:100px;}
.test2{ text-align:center;padding:5px }
.test2 li{ display:inline;}
.test2 li a{padding:2px 6px;background:#316ac5;color:#fff;border:1px solid #9C6;
text-decoration:none;}
.test2 li a:hover{background:#fff;color:#000}
</style>

<div class="warp2">    
    <ul class="test2">
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
    </ul>
</div>


<style>
.warp3{background:#ccc;width:500px;height:50px;}
.test3{padding-top:5px;float:left;position:relative;left:50%; clear:both}
.test3 li{float:left;display:inline;margin-right:5px;position:relative;left:-50%;}
.test3 li a{float:left;width:20px;height:20px;text-align:center;line-height:20px;background:#316ac5;color:#fff;border:1px solid #316ac5;text-decoration:none;}
.test3 li a:hover{background:#fff;color:#316ac5;}

</style>  
<div class="warp3">     
    <ul class="test3">
        <li><a href="#">1</a></li>
    </ul>
        <ul class="test3">
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>

    </ul>
        <ul class="test3">
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>

    </ul>
        <ul class="test3">
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
    </ul>
</div>

转载于:https://www.cnblogs.com/jinbiao/archive/2012/01/06/2314280.html