當我們讓一個模塊水平居中首先想到的肯定是margin:0 auto;有木有？那么今天給大家介紹一個fit-content屬性，原來這個CSS屬性是用來水平居中的，fit-content是CSS3中給width屬性新加的一個屬性值,它配合margin可以讓我們輕松的實現水平居中的效果;一起來看下代碼吧。
在不設置寬度，并且元素中含用float:left情況下居中,先看一段代碼:
<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>
li{float:left}
如此這個導航是不會居中的，當我們通過設置fit-content加上margin來做到居中。
ul{
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
  margin: auto;
}
目前這個屬性只支持Chrome和Firefox瀏覽器，下面是居中的代碼:
width:-moz-fit-content;
width:-webkit-fit-content;