CSS水平居中text-align:中心是前端工程师的基本功,我在项目中经常遇到CSS水平居中的需求,这篇教程将我以往用过的9种CSS实现水平居中的方法总结出来,也方便日后再用到时回顾。
<>强工具/原料
CSS
text-align:中心
<强>方法/步骤
1。通过保证金:0汽车;text-align:中心实现CSS水平居中。
这种方法是实现CSS水平居中最最常用的,我在前端开发中大概有60%的CSS水平居中就是通过“保证金:0汽车;text-align:中心”实现的。
?
2。通过显示:flex实现CSS水平居中。
随着越来越多兼容flexbox,所以通过”显示:flex“实现CSS水平居中的方案也越来越受青睐。
通过显示:flex实现CSS水平居中的原理是父元素显示:flex; flex-direction:列;而子元素align-self:中心;
这个跟CSS垂直居中的原理是一样的,只是在flex-direction上有所差别,一个是行(默认值),另外一个是列。
?
3。通过显示:表格单元和margin-left实现CSS水平居中。
对于父元素和子元素的宽度都确定的情况,适合通过显示:表格单元和margin-left实现CSS水平居中。
使用时,父元素显示:表格单元、子元素给剩余宽度一半的margin-left。
?
4。通过位置:绝对实现CSS水平居中。
这种方法跟上一个方法适用场景一样,也是适用于父元素和子元素的宽度都确定的情况。
使用时,父元素位置:绝对的,子元素给剩余宽度一半的margin-left。
做为一名前端程序员,有一个学习的氛围跟一个交流圈子特别重要。这是我的一个前端学习交流群330336289(邀请码:寂静),想学习交流前端,打算深入了解这个行业的朋友,不管你是小白还是大牛都欢迎加入,大家一起交流学习。
5。通过宽度:适合内容实现CSS水平居中。
这种方法可以确保子元素宽度不确定的情况下,也能实现CSS水平居中。
需要注意的是,需要配合“保证金:0汽车;text-align:中心”使用。
?
6。通过显示:inline-block和text-align:中心实现CSS水平居中。
显示:inline-block能改父元素内的子元素的表达样式,同样需要配合“保证金:0汽车;text-align:中心”使用。
7。通过位置:相对的,浮动:左和margin-left实现CSS水平居中。
给父元素样式位置:亲戚,给子元素浮动:左和margin-left就可以实现CSS水平居中。
8。通过隐藏节点+浮动的方法实现CSS水平居中。
我们可以通过增加一个隐藏节点,然后使其浮动:左,这样子元素就会被隐藏节点推着水平居中。
这种增加隐藏节点方法也适用于CSS垂直居中,原理一样,但是不用浮动。
9。通过变换实现CSS水平居中。
这种方法是最不推荐的方法,因属为变换性在各个浏览器中的表现行为不一致,所以会出现一些兼容性的问题,只有当已知用户浏览器时才推荐使用。
