这篇文章主要介绍了css实现水平居中的方法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。
css的基本语法是:1,css规则由选择器和一条或多条声明两个部分构成;2,选择器通常是需要改变样式的HTML元素;3,每条声明由一个属性和一个值组成;4,属性和属性值被冒号分隔开。
css实现水平居中的方法:1、使用保证金和text-align属性;2,通过“显示:flex”; 3,通过”显示:表格单元”和margin-left; 4,通过绝对定位;5,通过变换属性。
本教程操作环境:windows7多系统,CSS3&, HTML5版,戴尔G3电脑。
<强> css实现水平居中
<强> 1,通过保证金+ 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。
5 <强>,通过变换实现css水平居中。
这种方法是最不推荐的方法,因属为变换性在各个浏览器中的表现行为不一致,所以会出现一些兼容性的问题,只有当已知用户浏览器时才推荐使用。
感谢你能够认真阅读完这篇文章,希望小编分享的“css实现水平居中的方法”这篇文章对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,更多相关知识等着你来学习!
css实现水平居中的方法
