多種方式實現ul中的li居中的利弊

<div class="Box">
      <ul>

          <li>我是居中</li>
          <li>我是居中</li>
          <li>我是居中</li>
          <li>我是居中</li>
          <li>我是居中</li>
          <li>我是居中</li>
          <li>我是居中</li>
      </ul>
</div>
1.關鍵詞：margin  or padding
        這種方式居中很糾結，適應能力差，margin大小和padding大小都必須跟網頁大小同時變化，不做詳解
2.關鍵詞： relative
        這種方式居中也很糾結，必須根據網頁大小以及div大小來控制居中，同1，不做過多解釋
3.關鍵詞： float
        這種方式我推薦，所以我對上面html代碼進行了樣式布局，樣式如下：
<style type="text/css">
        . Box{margin: 0 auto;width: 400px;}  //400px為li的總寬度，可以隨自己大小變換自定義，適應性強
        . Box ul{list-style-type:none }
        . Box ul li{ float: left}
</style>
4.關鍵詞：display
        這種方法比較好，我一直是用這種方法，核心就是把行級元素變化成塊級元素，附上樣式：
<style type="text/css">
        . Box{margin-top:10px;background:#D9EBF5;text-align:center;}  //控制Box中的內容居中
        . Box ul{ padding:4px 0;margin:0;overflow:hidden;}
        . Box li{ display:inline;padding:0;}    //將li轉換成塊級元素展現
</style>       

小結：1，2適應性不夠強，3，4我主推，當然個人喜好不同，同時也考慮到維護的便捷性，各取所需