css实现水平居中的方法

这篇文章主要介绍了css实现水平居中的方法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

创新互联坚持“要么做到,要么别承诺”的工作理念,服务领域包括:网站制作、成都网站建设、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的尼木网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!

css的基本语法是什么

css的基本语法是:1、css规则由选择器和一条或多条声明两个部分构成;2、选择器通常是需要改变样式的HTML元素;3、每条声明由一个属性和一个值组成;4、属性和属性值被冒号分隔开。

css实现水平居中的方法:1、使用margin和text-align属性;2、通过“display:flex”;3、通过“display:table-cell”和margin-left;4、通过绝对定位;5、通过transform属性。

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

css实现水平居中

1、通过margin+text-align实现CSS水平居中。

这种方法是实现CSS水平居中最最常用的,我在前端开发中大概有60%的CSS水平居中就是通过“margin: 0 auto; text-align: center”实现的。

css实现水平居中的方法

2、通过display:flex实现CSS水平居中。

随着越来越多兼容flexbox,所以通过“display:flex”实现CSS水平居中的方案也越来越受青睐。

通过display:flex实现CSS水平居中的原理是父元素display:flex;flex-direction:column;而子元素align-self:center;

这个跟CSS垂直居中的原理是一样的,只是在flex-direction上有所差别,一个是row(默认值),另外一个是column。

css实现水平居中的方法

3、通过display:table-cell和margin-left实现CSS水平居中。

对于父元素和子元素的宽度都确定的情况,适合通过display:table-cell和margin-left实现CSS水平居中。

使用时,父元素display:table-cell,子元素给剩余宽度一半的margin-left。

css实现水平居中的方法

4、通过绝对定位实现CSS水平居中。

这种方法跟上一个方法适用场景一样,也是适用于父元素和子元素的宽度都确定的情况。

使用时,父元素position:absolute,子元素给剩余宽度一半的margin-left。

css实现水平居中的方法

5、通过transform实现CSS水平居中。

这种方法是最不推荐的方法,因为transform属性在各个浏览器中的表现行为不一致,所以会出现一些兼容性的问题,只有当已知用户浏览器时才推荐使用。

css实现水平居中的方法

感谢你能够认真阅读完这篇文章,希望小编分享的“css实现水平居中的方法”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!


新闻名称:css实现水平居中的方法
文章分享:http://scyanting.com/article/gecodj.html