在開發過程中，想到一個問題，平時對塊級元素居中的時候都是定義一個寬度然后簡單的通過margin:0 auto;實現，但是如果內容增加，是不是每次都需要修改寬度呢。我覺得需要思考一個自適應內容，並居中的方案。
於是，我寫了一個Demo去思索一下這個問題，並簡單檢驗一下自己的想法。HTML代碼如下：
1 <div class='container'> 2 <ul class="clearfix"> 3 <li><a href="javascript:void(0);"></a></li> 4 <li><a href="javascript:void(0);"></a></li> 5 <li><a href="javascript:void(0);"></a></li> 6 </ul> 7 </div>
這是一個非常簡單的結構，也便於讓大家了解我的方法。
CSS代碼如下:
1 .clearfix:after{ 2 content:''; 3 visibility:hidden; 4 font-size:0; 5 height:0; 6 display:block; 7 clear:both; 8 } 9 10 .container{ 11 width:100%; 12 text-align:center; 13 } 14 15 ul{ 16 display:inline-block; 17 } 18 19 li{ 20 float:left; 21 width:20px; 22 height:20px; 23 margin:0 20px; 24 -webkit-border-radius: 10px; 25 -moz-border-radius: 10px; 26 -o-border-radius: 10px; 27 border-radius: 10px; 28 cursor:pointer; 29 } 30 31 a{ 32 display:block; 33 background-color:#000; 34 }
實現的效果如圖：
這實現思想是，先讓ul定義 display:inline-block 屬性，讓其變成行內塊級元素。
當ul成為行內塊級元素后，它便有了行級元素的特性。
那么，重點來了。
只需要對ul的父級元素 .container 定義一個text-align:center;
效果便可以很明顯的看到了。
更重點是，ul內的li的增減並不會對其位置造成偏移。
或許這個技巧很普通，但是我覺得這是一個思索的過程，如果有不足，請各位指出！