<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我主推，当然个人喜好不同，同时也考虑到维护的便捷性，各取所需