定宽居中我们见的很多，可以用width、text-align、margin等来实现，但是如果没有宽度呢？

   下面提供几种思路供大家参考，给出基本的html结构和思路，当然了，也不一定是这样的结构，道理搞懂了相信大家能够灵活变通。另外，里面的项是有固定宽和高的。

   <header>

   <nav>

    <ul>

   <li>a</li>

   <li>b</li>

   <li>c</li>

   </ul>

   </nav>

   </header>

   方法一：绝对、相对定位或者translateX

    nav{position:absolute;left:50%;}

    nav ul{position:relative;left:-50%;overflow:hidden;}

    nav ul li{width:150px;height: 300px;float: left;background: #0F0;}

   header默认宽度100%，把nav绝对定位，left:50%;然后里面的ul进行相对定位，left:-50%;在这点上绝对定位是办不到的，因为它把布局破坏掉了，容器宽度没有的情况下，它就面目全非，也无从谈起left:-50%。可能有人说，margin-left:-50%:也是可以的吧，这个在现有条件下是不行滴，它需要父容器宽度固定。那还有其他的么，当然，使用translateX(-50%)同样可以达到效果，因为它也不需要父容器的宽度。

   这种方法有一点需要注意，因为你定的外层容器left:50%;如果你加了很多项进去，或者每一项的宽度过宽，导致那个“隐形”的容器(nav)右侧超过了浏览器的宽度，溢出了的话，里面的内容是会被挤下去的，这个时候，就违背初衷了，使用的时候要小心哦！~

   方法二：使用Flexbox来实现

   如果有过一定了解的人会知道，这个方法实现起来so easy，只不过需要浏览器支持它罢了，使用此法，则不需要定位了。

   css如下

    ul{

    display: -webkit-flex;

   -webkit-flex-direction: row;

   -webkit-justify-content: center;

   }

   此法可以说是干净利落不留痕呐，just低版本IE不兼容~此处仅加了webkit前缀，不了解的童鞋且勿直接照搬使用哦。

   更多flexbox相关可参考http://www.w3cplus.com/blog/tags/157.html

   方法三：js获取项目数设置宽度

   这种方法可以说是有点笨，只是绕了个弯子，仍然使用的是常规固定宽度水平居中的方法，通过js获取li，得到一个数组，然后数组长度乘以单项宽度，得到应有的总宽度，把总宽度值赋给外层ul即可，虽然此法略显笨拙，但如果在你不了解其他方法的情况下，不失为一种可行方案。

   方法四：传说中的float：center

    nav{

    text-align:center;

    overflow:hidden;

    }

    nav ul{

    position:relative;

    left:50%;

    float:left;

    }

    nav ul li{

    float:left;

    width:150px;

    height: 300px;

    position:relative;

    right:50%;

    }

   这种方法是一位前辈介绍的“古老”的方法，简单说来，是用了两次相对定位,ul相对定位，left:50%;li相对定位，right:50%或left:-50%也可。用我的话概括一下就是：整体右移，逐项左移。咦？这听起来似乎跟第一种方法有异曲同工之处。呵呵。就是这样的，本人能力有限，更深刻的道理也讲不出来。如果有其他玄机，还请高手不吝赐教。

   方法五：

   nav ul li{

   display:inline-block;

   }

   nav ul{

   text-align:center;

   }

   把其中的每一项设置成为行内块元素，然后用文本居中的方式使其居中，这种方法可以说是手起刀落，也没有什么难懂的原理在里面。

   到最后了，说说我是怎么想起谈这个话题的吧，是一个企鹅的前辈考我的，当时，我本来是可以想到第二、三种方法，但顾及到浏览器兼容性和“笨”方法的缘故，我用了第一种方法，可惜还紧张没写对~所以，一直在寻求更多解决方案，以上是目前为止所知的几种。当然，只是提供了思路，可能有瑕疵还有细节没有说到，大家自己研究一下吧。会收获更多。欢迎交流！~

建议继续学习：

1. 120个优秀的水平导航设计    (阅读：73848)
2. 网站导航设计的6大分类    (阅读：7882)
3. 我们来做一个会呼吸的菜单吧!!    (阅读：3270)
4. 递归并不一定非得是“自己调用自己的function”    (阅读：3190)
5. 实现一个更精简的Tab    (阅读：2414)
6. 终极攻略――未知高度元素垂直居中    (阅读：2288)
7. 关于网站地图    (阅读：2419)
8. 用面包屑来简化多层的tabs    (阅读：2384)
9. 网站导航设计模式指南    (阅读：2373)
10. 给网站布置一个明晰的“关于”页面    (阅读：2204)