当我们做水平居中的时候，会有许多方法，margin:0 auto,或者test-align:center,以及flex布局。当元素的width不固定的时候，我们如何实现水平居中呢，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul{
margin:0 auto;
}
li{
list-style: none;
float: left;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="navbar center">
<ul>
<li><a href="/">首页</a></li>
<li><a href="/">关于我们</a></li>
<li><a href="/">产品展示</a></li>
<li><a href="/">客户支持</a></li>
<li><a href="/">联系我们</a></li>
</ul>
</div>
</body>
</html>
效果如下：
并没有居中，这个时候我们可以用fit-content来实现水平居中了，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul{
width: -moz-fit-content;
width: fit-content;
margin:0 auto;
}
li{
list-style: none;
float: left;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="navbar center">
<ul>
<li><a href="/">首页</a></li>
<li><a href="/">关于我们</a></li>
<li><a href="/">产品展示</a></li>
<li><a href="/">客户支持</a></li>
<li><a href="/">联系我们</a></li>
</ul>
</div>
</body>
</html>
此时我们就可以实现水平居中了，但是fit-content这个是css3新增的属性，仅支持谷歌和火狐浏览器