网赚妈妈

 找回密码
 立即注册
搜索
查看: 405|回复: 20

[网赚吧] CSS实现水平、垂直居中,N种方法,彻底说透!

[复制链接]
  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

    发表于 2018-9-26 21:22:42 | 显示全部楼层 |阅读模式

    水平、垂直居中,是CSS中经常用到的,也是面试必考题,居中有很多种方式,今天一篇文章,彻底说全、说透!

    譬如,要实现以下效果:

    VXL7uH374ElmBaM1.jpg


    方法一:absolute + 负margin (此方法好理解,兼容性OK,缺点是需要知道子元素的宽高)

    <!--html代码--><div class="dbig"> <div class="box size">aaaaaa</div></div>/*css代码*/.dbig{ border: 1px solid red; width: 300px; height: 300px; position: relative;}.box { background: green; }.box.size{ width: 100px; height: 100px; position: absolute;; top: 50%; left: 50%; margin-left: -50px; margin-top: -50px;}

    方法二:absolute + margin auto(此方法兼容性也很好,缺点是需要知道子元素的宽高)

    <!--html代码--><div class="dbig"> <div class="box size">aaaaaa</div></div>/*css代码*/.dbig{ position: relative;}.box { position: absolute;; top: 0; left: 0; right: 0; bottom: 0; margin: auto;}

    方法三:absolute + calc(此方法兼容性依赖calc的兼容性,缺点是需要知道子元素的宽高)

    <!--html代码--><div class="dbig"> <div class="box size">aaaaaa</div></div>/*css代码*/.dbig{ position: relative;}.box { position: absolute;; top: calc(50% - 50px); left: calc(50% - 50px);}

    方法四:absolute + transform(这种方法兼容性依赖translate2d的兼容性)

    <!--html代码--><div class="dbig"> <div class="box size">aaaaaa</div></div>/*css代码*/.dbig{ position: relative;}.box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

    方法五:lineheight(此方法需要在子元素中将文字显示重置为想要的效果)

    <!--html代码--><div class="dbig"> <div class="box size">aaaaaa</div></div>/*css代码*/.dbig{ line-height: 300px; text-align: center; font-size: 0px;}.box { font-size: 16px; display: inline-block; vertical-align: middle; line-height: initial; text-align: left; /* 修正文字 */}

    方法六:css-table(css新增的table属性,可以让把普通元素变为table元素的现实效果,通过这个特性也可以实现水平垂直居中,这种方法和table一样的原理,但却没有那么多冗余代码,兼容性也还不错)

    <!--html代码--><div class="dbig"> <div class="box size">aaaaaa</div></div>/*css代码*/.dbig{ display: table-cell; text-align: center; vertical-align: middle;}.box { display: inline-block;}

    方法七:flex(目前在移动端已经完全可以使用flex了,PC端需要看自己业务的兼容性情况)

    <!--html代码--><div class="dbig"> <div class="box size">aaaaaa</div></div>/*css代码*/.dbig{ display: flex; justify-content: center; align-items: center;}

    总结1:

    1、PC端有兼容性要求,宽高固定,推荐absolute + 负margin

    2、PC端有兼容要求,宽高不固定,推荐css-table

    3、PC端无兼容性要求,推荐flex

    4、移动端推荐使用flex

    总结2:兼容性

    方法

    居中元素定宽高固定PC兼容性移动端兼容性

    1)absolute + 负margin

    ie6+, chrome4+, firefox2+安卓2.3+, iOS6+absolute + margin auto是ie6+, chrome4+, firefox2+安卓2.3+, iOS6+

    2)absolute + calc

    ie9+, chrome19+, firefox4+安卓4.4+, iOS6+

    3)absolute + transform

    ie9+, chrome4+, firefox3.5+安卓3+, iOS6+

    4)lineheight

    ie6+, chrome4+, firefox2+安卓2.3+, iOS6+

    5)css-table

    ie8+, chrome4+, firefox2+安卓2.3+, iOS6+

    6)flex

    ie10+, chrome4+, firefox2+安卓2.3+, iOS6+

    回复

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-9-26 21:23:33 | 显示全部楼层
    大家多多留言哦,将前端原创精品进行到底!!
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-9-26 21:26:46 | 显示全部楼层
    great,3ks
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-9-26 21:30:26 | 显示全部楼层
    谢谢分享 我的个人博客有救了
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-9-26 21:33:08 | 显示全部楼层
    关注一波[泪奔]
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-9-26 21:36:43 | 显示全部楼层
    不错吆
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-9-26 21:39:31 | 显示全部楼层
    透彻
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-9-26 21:43:03 | 显示全部楼层
    转发了
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-9-26 21:45:40 | 显示全部楼层
    转发了
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-9-26 21:49:19 | 显示全部楼层
    转发了
    回复 支持 反对

    使用道具 举报

    xml|2.xml|QQ3014497968|文章发布|签到|小黑屋|网赚论坛-致富项目网络赚钱平台 |网站地图

    GMT+8, 2019-10-17 21:02 , Processed in 0.164700 second(s), 15 queries , File On.

    Powered by Discuz! X3.3

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表