CSS居中

发布时间:2016-12-29 16:17 阅读:317

文/饥人谷 直播10班_李瑛

本文著作权归作者所有;如需转载请联系饥人谷,并注明原文出处

水平居中

  1. 针对宽度不为100%的块级元素

    margin-left: auto;
    margin-right: auto;
    或者
    margin: 0 auto;
  2. 针对行内元素和块级元素的内容。当父元素的宽度是100%时,子元素中的行内元素和内容始终水平居中
    text-align: center;

垂直居中

  1. 上下padding相等。(容器的高度由内容撑开) html结构:

    
    这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落
    这是段落
    这是段落
    

    css:

    .ct{
    padding: 40px 0;
    background: pink;
    text-align: center;
    border: 1px solid;
    }

    实例

  2. 绝对定位实现垂直居中(容器内容较为复杂,比如:弹窗) html结构:

    
    我是标题
    我是内容
    

    css:

    .dialog{
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -200px;
    margin-top: -150px;
    
    width:400px;
    height: 300px;
    box-shadow: 0px 0px 3px #000;
    }

    注:以上方法在宽高为定值的条件下使用。宽高发生变化时,margin-leftmargin-right需要做出相应修改。 实例 使用CSS3的属性:transform: translate(-50%, -50%);自动偏移本身宽高的50% 将上述css代码修改为:

    .dialog{
    position: absolute;
    left: 50%;
    top: 50%;
    /* margin-left: -200px; */
    /* margin-top: -150px; */
    
    transform: translate(-50%, -50%);
    /* width:500px; */
    /* height: 100px; */
    box-shadow: 0px 0px 3px #000;
    }

    注:上述代码可在宽高不为定值时使用,只是需要浏览器兼容CSS3才能使用。 实例

  3. 使用vertical-align(容器内容简单) vertical-align:自身基线参考位置。使用对象:行内元素和表格 html结构:

    css:

    .middle{
     text-align: center;
    }
    .middle:before{
    content: '';/*行内元素,不能设置宽高*/
    /* content: '小'; */
    /* background: red; */
    display: inline-block;/*可设置宽高*/
    height: 100%;
    vertical-align: middle;
    }

    实例

  4. display: table-cell(改变了元素的display特性) html结构:

    css:

    .box{
    width: 300px;
    height: 200px;
    border: 1px solid ;
    display: table-cell;/*以表格的方式呈现内容*/
    vertical-align: middle;/*表格内元素基线参考位置*/
    text-align: center;
    }

    实例

  5. dispaly:flex html结构:

    css:

    .box{
    display: flex;
    height:300px;
    border: 1px solid;
    }
    .ct{
    height: 100px;
    width: 100px;
    background: red;
    margin: auto;
    }

    实例 阮一峰网络日志 mdn

  6. line-height(单行文本垂直居中) 只适用于单行文字,line-height值大于等于font-size时使用。line-height值小于font-size时,单行文字会溢出行框,多行文字会发生重叠。

    实例

文章著作权归本人所有,转载须说明来源

可以输入140个字