zoukankan      html  css  js  c++  java
  • css的几种垂直水平居中方法

    总结了几种css居中实现的方式,注:*为常用方式,“wrap”为容器,“div”为要居中的元素。

    *1.绝对定位,宽高都已知的情况下如下代码可实现,或者可以使用negative margins;

    .div {  
         200px;
        height: 200px;
        margin: auto;  
        position: absolute;  
        top: 0; left: 0; bottom: 0; right: 0;  
    }

    2.不知道元素的宽高,仅仅实现某个div是其父的1/2,水平垂直居中,随着父元素的大小等比例放大或者缩小。

    .div{
        position: absolute;
        left: 30%;
        right:30%;
        top: 25%;
        bottom:25%;
    }
    

    *3.translate,宽度已知,高度未知的情况下

    .wrap{
        200px;//也可以不写,默认占总宽度的50%
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);
    }

    4.table-cell,div本身高度未知,仅仅实现垂直居中的情况下,ps,此种情况div宽度是100%

    .wrap{//外层容器
        display: table; 
    }
    .div{//内层容器
        display: table-cell;  
        vertical-align: middle;  
    }
    

    *5.flex布局,宽度都不固定的情况下,只要在父容器中设置display:flex即可。

    .wrap{
        display: flex; 
        display: -webkit-flex; 
        justify-content: center;
        align-items: center;	
    } 

    6.hack方法,善于运用:after。

    .wrap {   
        text-align: center;  
        overflow: auto;  
    }    
    .wrap:after,  
    .div {  
        display: inline-block;  
        vertical-align: middle;  
    }    
    .div:after {  
        content: '';  
        height: 100%;  
        margin-left: -0.25em; /* 需要根据不同的字号做调整 */  
    }    
    .wrap {  
        max- 99%; /* 防止文档过长时会到容器的顶部 */  
        max- calc(100% - 0.25em) /* Only for IE9+ */   
    } 
    

      

      

      

      

  • 相关阅读:
    图片尺寸批量resize的matlab并行代码
    Java使用QRCode.jar生成与解析二维码
    MySQL求两表的差集(非交集)
    sql笔记
    Oracle创建表空间创建用户授权
    身份证前6位地址码+码表+MySQL
    Jenkins时区设置为北京时间
    Oracle 使用MERGE INTO 语句 一条语句搞定新增编辑
    Oracle dd-m月-yy转yyyy-mm-dd
    docker 使用笔记
  • 原文地址:https://www.cnblogs.com/lixuemin/p/6129284.html
Copyright © 2011-2022 走看看