CSS3技巧：fit-content水平居中
更新时间：2020-01-21 13:37:55 来源： 阅读量：
【摘要】 前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。考必过为大家整理了CSS3技巧：fit-content水平居中，想学习前端的小伙伴可以看过来！CSS3技巧：fit-content水平居中的详细内容如下：
当我们让一个模块水平居中首先想到的肯定是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;
以上就是CSS3技巧：fit-content水平居中的详细内容，在学习前端的过程中大家要学会利用网络解决问题。只看理论是不能带来提到的，将学到的知识进行实践才能帮助我们熟悉代码的运用，特别是项目经验，可以为我们带来很大的提升哦！