zoukankan      html  css  js  c++  java
  • CSS居中布局(水平居中和垂直居中)

    一、水平居中的四种方法(父容器和子容器宽度均不固定)

    1、inline-block + text-align

    子容器:{display:inline-block}

    父容器:{text-align:center}

    缺点:不兼容IE6、7,子容器内部的内容也会居中

    兼容办法:子容器:{zoom:1;display:inline-block}//模拟inline-block

    2、table + margin

    子容器:{display:table; margin:0 auto;}//display:table使子容器宽度随着内容走

    优点:只用处理子容器

    缺点:不兼容IE6、7

    兼容办法:将html结构改成<table></table>

    3、absolute + transform

    父容器:{position:relative}

    子容器:{position:absolute; left:50%;transform:translateX(-50%)}//子容器往左移动了自己宽度的50%

    优点:子容器不影响其他子元素

    缺点:transform是CSS3的样式,不兼容IE6、7、8,可能需要给不同浏览器加不同的私有前缀

    4、flex + justify-content

    (1) 父元素:{dispaly:flex;justify-content:center;}

    优点:不需要设置子元素

    (2) 父元素:{dispaly:flex;} 子元素:{margin:0 auto}

    缺点:只有高版本浏览器才兼容flex和align-items

    二、垂直居中的三种方法(父容器和子容器宽度均不固定)

    1、table-cell + vertical-align

    父容器:{display:table-cell;vertical-align:middle;}

    优点:只用处理父容器

    缺点:不兼容IE6、7

    兼容办法:将html结构改成<table></table>

    2、absolute + transform

    父容器:{position:relative}

    子容器:{position:absolute;top:50%;transform:transformY(-50%)}

    优点:子容器不影响其他子元素

    缺点:transform是CSS3的样式,不兼容IE6、7、8,可能需要给不同浏览器加不同的私有前缀

    3、flex + align-items

    父容器:{display:flex;align-items:center;}//当时flex时父容器默认的align-items是stretch

    缺点:只有高版本浏览器才兼容flex和align-items

    二、水平和垂直都居中的三种方法(父容器和子容器宽度均不固定)

    1、inline-block + text-align + table-cell + vertical-align

    子容器:{display:inline-block}

    父容器:{display:table-cell;text-align:center;vertical-align:middle;}

    2、absolute + transform

    父容器:{position:relative}

    子容器:{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}

    3、flex + justify-content + align-items

    父容器:{display:flex;justify-content:center;align-items:center;}

     

  • 相关阅读:
    网上零售是国内品牌开拓海外市场的最佳途径
    一个都不能少,海外B2C实战攻略全解
    我想和你一起浅浅淡淡的生活
    中国十大电子商务网站排名
    外贸B2C必读:外贸B2C入行指南(一)
    外贸B2C必读:外贸B2C入行指南(二)
    09年美国最热门的100个B2C网站,他们是怎么成功的?
    几个jsp模块
    【Quartz】【程序目录结构】/DetectNonWorkingDay/src/main/java/com/apple/sqm/dnwd/detect/delta/Detect.java
    Servlet 工作原理解析
  • 原文地址:https://www.cnblogs.com/CassieHouse/p/6434460.html
Copyright © 2011-2022 走看看