• css 盒子垂直居中


    面试的时候经常会被问到这样一个题目:让一个元素中内容垂直居中怎么做。其实之前,我就会两种,line-height和table-cell,
    今天做项目,遇到了这个问题,就系统的查了一下,总结一下方法:
    1、line-height div{ height: 100px; line-height:100px; text-align:center; } 这样就能让div中的文字水平垂直居中了 2、display:table-cell table-cell这个属性是在看head first 书的时候学习的,通过display 设置为table table-row table-cell,让元素以表格的样子显示。 .out{ display:table; } .inner{ display: table-cell; vertical-align: middle; } 3、CSS3的flex布局 div{ /*设置为伸缩容器*/ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; /*水平居中*/ -webkit-box-pack: center;/*旧版本*/ -moz-box-pack: center;/*旧版本*/ -ms-flex-pack:center;/*混合版本*/ -webkit-justify-content:center;/*新版本*/ justify-content: center;/*新版本*/ /*垂直居中*/ -webkit-box-align: center;/*旧版本*/ -moz-box-align: center;/*旧版本*/ -ms-flex-align: center;/*混合版本*/ -webkit-align-items: center;/*新版本*/ align-items: center;/*新版本*/ } 4、使用padding,这需要知道确定的高度 5、CSS3的transform来实现 .center-vertical{ position: relative; top:50%; transform:translateY(-50%); }.center-horizontal{ position: relative; left:50%; transform:translateX(-50%); }

    转自:http://blog.csdn.net/xiaozhuxmen/article

    面试的时候经常会被问到这样一个题目:让一个元素中内容垂直居中怎么做。其实之前,我就会两种,line-height和table-cell,今天做项目,遇到了这个问题,就系统的查了一下,总结一下方法:
    1、line-height

    div{
        height: 100px;
        line-height:100px;
        text-align:center;
    }

    这样就能让div中的文字水平垂直居中了

    2、display:table-cell

    table-cell这个属性是在看head first 书的时候学习的,通过display 设置为table table-row table-cell,让元素以表格的样子显示。

    .out{
        display:table;
    }
    .inner{
        display: table-cell;
        vertical-align: middle;
    }

    3、CSS3的flex布局

    div{
        /*设置为伸缩容器*/
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        /*水平居中*/
        -webkit-box-pack: center;/*旧版本*/
        -moz-box-pack: center;/*旧版本*/
        -ms-flex-pack:center;/*混合版本*/
        -webkit-justify-content:center;/*新版本*/
        justify-content: center;/*新版本*/
        /*垂直居中*/
        -webkit-box-align: center;/*旧版本*/
        -moz-box-align: center;/*旧版本*/
        -ms-flex-align: center;/*混合版本*/
        -webkit-align-items: center;/*新版本*/
        align-items: center;/*新版本*/
    }

    4、使用padding,这需要知道确定的高度
    5、CSS3的transform来实现

    .center-vertical{
      position: relative;
      top:50%;
      transform:translateY(-50%);
    }.center-horizontal{
      position: relative;
      left:50%;
      transform:translateX(-50%); 
    }
  • 相关阅读:
    LA3523 二分图和点双连通分量的综合性质及证明
    LA4127计算几何+离散化+点覆盖
    LA 4728凸包算法-旋转卡壳的直径
    UVA 11168凸包+距离公式
    UVA 10652凸包+面的旋转
    UVA10969计算几何+交叉圆形成的圆弧长
    LA3485二分+求解积分方程+辛普森算法计算积分
    LA5009三分法
    UVA10341幂函数零点的通解分析
    UVA11524构造系数数组+高斯消元解异或方程组
  • 原文地址:https://www.cnblogs.com/sxz2008/p/6632567.html
Copyright © 2020-2023  润新知