如何让一个float:left的元素居中

这篇文章给大家分享的是有关如何让一个float:left的元素居中的内容。小编觉得挺实用的，因此分享给大家做个参考。一起跟随小编过来看看吧。

员工经过长期磨合与沉淀，具备了协作精神，得以通过团队的力量开发出优质的产品。创新互联坚持“专注、创新、易用”的产品理念，因为“专注所以专业、创新互联网站所以易用所以简单”。公司专注于为企业提供成都网站设计、做网站、成都外贸网站建设公司、微信公众号开发、电商网站开发，重庆小程序开发，软件定制设计等一站式互联网企业服务。

第一种方法

现在它所处的位置 在页面的最左边

我们都知道在浮动的情况下添加margin: 0 auto; 是没有任何效果的。

那么我们在box的外面再套一个div 就是给他一个爸爸 让他的爸爸处于页面的正中央

运行代码 我们得到下面的结果

蓝色的con为砖红色box的“爸爸”，从图上我们可以很清楚的看到， con通过定位往左移了百分之五十。而box通过相对定位，定位在con的-50%的地方，即为正中心。

给子元素相对定位，是想将相对于父元素来定位自己的位置，float:left让子元素在同一水平线上显示，left:-50%是因为子元素的整体宽度就是父元素的宽度，left:50%就是让子元素内容往相对父元素左上那一点往左移动父元素一半的宽度（right:50%是距右边50%，效果一样），正好实现子元素内容居中显示的效果。

这是引用了别人的话，会更加清晰。

第二种方法

是使用原生JavaScript写的

通过获取屏幕的总宽度 减去box本身的宽度 除以二 便得到了中心的位置。

第三种方法

JQ

和JS的原则是一样的~

感谢各位的阅读！关于如何让一个float:left的元素居中就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到吧！