zoukankan      html  css  js  c++  java
  • 实现水平居中/垂直居中的一些方法

    一、水平居中

    1. text-align:center(行内元素)

      给其父元素设置属性 text-align:center;

    2. margin: 0 auto(块级元素)

      给元素本身设置 margin: 0 auto;

    3. 元素的宽度固定

      1⃣️ position+margin-left

    .ele{
        position:absolute;
        固定;
        left:50%;
        margin-left:-0.5宽度;
    }

      2⃣️ position+left:0;right:0;margin:0 auto 

    .ele{
        position:absolute;
        固定;
        left:0;
        right:0;
        margin:0 auto;
    }

    4.元素的宽度不固定

      1⃣️css3-transform

    .ele{
        position:absolute;
          left:50%;
          transform:translate(-50%,0);
    }

      2⃣️css3-fit-content(当需要居中的元素设置了float:left时,可以给该元素的父元素设置如下属性)

    .ele-parent{
           -moz-fit-content;
         -webkit-fit-content;
        fit-content;
        margin:0 auto;
    }
    该属性目前只支持Chrome 和 Firefox浏览器.

       3⃣️flex

    .ele-parent{
        display: flex;
        justify-content: center;
    }

    二、垂直居中

     1. line-height:eleparent-height

      单行文本的垂直居中可以设置属性 line-height:父元素height

    2. 元素的高度固定

      1⃣️position+margin-top

    .ele-parent{
        position:relative;
    }
    .ele{
        position:absolute;
        top:50%;
        height:固定;
        margin-top:-0.5高度;
    }

      2⃣️ position+top:0;bottom:0;margin:auto 0

    .ele{
        position:absolute;
        height:固定;
        top:0;
        bottom:0;
        margin:auto 0;
    }

    3.元素高度不固定

      1⃣️vertical-align

    .ele-parent{
        display:table;
    }
    .ele{
        display:table-cell;
      vertical-align:middle; }
        

      2⃣️css3-transform

    .ele{
        position:absolute;
        top:50%;
        transform: translate(0,-50%);
    }

       3⃣️flex

    .ele-parent{
        display: flex;
        align-items:center;
    }

      

    暂时只整理到这些,不足之处还请 批评指正!!!

      

  • 相关阅读:
    c#透明TextBox
    Twitter的分布式自增ID算法snowflake(雪花算法)
    关于权限设计的一点建议
    关于下载地址权限控制的一点问题解决方法
    数据结构_总结
    输出全排列输出
    数据结构_图总结
    n个括号对的所有可能情况
    根据表达式序列(前缀、中缀、后缀)构建表达式树
    Java finally语句是在try或catch的retrurn之前还是之后执行
  • 原文地址:https://www.cnblogs.com/aaronhan1215/p/6747581.html
Copyright © 2011-2022 走看看