定宽居中我们见的很多，可以用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;
}
把其中的每一项设置成为行内块元素，然后用文本居中的方式使其居中，这种方法可以说是手起刀落，也没有什么难懂的原理在里面。
到最后了，说说我是怎么想起谈这个话题的吧，是一个企鹅的前辈考我的，当时，我本来是可以想到第二、三种方法，但顾及到浏览器兼容性和“笨”方法的缘故，我用了第一种方法，可惜还紧张没写对~所以，一直在寻求更多解决方案，以上是目前为止所知的几种。当然，只是提供了思路，可能有瑕疵还有细节没有说到，大家自己研究一下吧。会收获更多。欢迎交流！~