首页 >web前端 >css教程 > 正文

css如何实现水平居中

原创2021-04-28 17:42:400973

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”实现的。

1.png

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

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

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

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

2.png

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

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

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

3.png

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

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

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

4.png

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

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

9.png

(学习视频分享:css视频教程

以上就是css如何实现水平居中的详细内容,更多请关注php中文网其它相关文章!

php中文网最新课程二维码

声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理

  • 相关标签:css 水平居中
  • 相关文章

    相关视频


    网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
  • 专题推荐

    作者信息

    青灯夜游

    今天学习一小步,明天提升一大步

    最近文章
    php数组中怎么增加元素941
    php怎么找出两个数组不同的元素163
    php怎么改变数据类型559
    推荐视频教程
  • Css3特效效果视频教程Css3特效效果视频教程
  • CSS高级实例视频教程CSS高级实例视频教程
  • CSS3进阶视频教程CSS3进阶视频教程
  • CSS3精讲视频教程CSS3精讲视频教程
  • CSS的美化功能CSS的美化功能
  • 视频教程分类