爱刨根知识网

  1. 首页 > 经验知识 > >

互联网常识：css怎么设置居中

生活经验知识分享


跟大家讲解下有关css怎么设置居中 ， 相信小伙伴们对这个话题应该也很关注吧 ， 现在就为小伙伴们说说css怎么设置居中 ， 小编也收集到了有关css怎么设置居中的相关资料 ， 希望大家看到了会喜欢 。

css设置居中的方法：1、通过【margin: 0 auto; text-align: center】实现CSS水平居中；2、通过【display:flex】实现CSS水平居中；3、通过【display:table-cell】实现居中 。
本教程操作环境：windows7系统、css3版 ， DELL G3电脑 。
css设置居中的方法：
1、通过margin: 0 auto; text-align: center实现CSS水平居中 。
这种方法是实现CSS水平居中最最常用的 ， 我在前端开发中大概有60%的CSS水平居中就是通过“margin: 0 auto; text-align: center”实现的 。
2、通过display:flex实现CSS水平居中 。
随着越来越多兼容flexbox ， 所以通过“display:flex”实现CSS水平居中的方案也越来越受青睐 。
通过display:flex实现CSS水平居中的原理是父元素display:flex;flex-direction:column;而子元素align-self:center;
这个跟CSS垂直居中的原理是一样的 ， 只是在flex-direction上有所差别 ， 一个是row(默认值) ， 另外一个是column 。
3、通过display:table-cell和margin-left实现CSS水平居中 。
对于父元素和子元素的宽度都确定的情况 ， 适合通过display:table-cell和margin-left实现CSS水平居中 。
使用时 ， 父元素display:table-cell ， 子元素给剩余宽度一半的margin-left 。
相关学习推荐：css教程
以上就是css怎么设置居中的详细内容 ， 更多请关注php中文网其它相关文章！
来源：php中文网
【互联网常识：css怎么设置居中】

    推荐阅读


    上一篇：如何编辫子

    下一篇：放线用的仪器叫什么