fit-content實現元素水平置中

這次給大家帶來fit-content實現元素水平置中，fit-content實現元素水平置中的注意事項有哪些，下面就是實戰案例，一起來看一下。

當我們讓一個模組水平置中首先想到的肯定是margin:0 auto;有木有？那麼今天給大家介紹一個fit-content屬性，不知道有沒有同學用過，如果用過那麼你可以略過這篇文章，沒用過的同學就繼續了，我也是第一次看到這個屬性，之前不知道這個屬性更不用說使用了，原來這個CSS屬性是用來水平置中的，fit-content是CSS3中給width屬性新加的一個屬性值,它配合margin可以讓我們輕鬆的實現水平置中的效果;一起來看下代碼吧。

在不設定寬度，並且元素中含用float:left情況下置中,先看一段代碼:

如此這個導航是不會置中的，當我們通過設定fit-content加上margin來做到置中。

目前這個屬性只支援Chrome和Firefox瀏覽器，下面是置中的代碼:

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

css3的pointer-events使用詳解

完全利用CSS實現元素置中

font-size-adjust屬性如何最佳化網頁排版