• CSS垂直居中,水平居中


    如何进行CSS垂直居中是开发中经常遇到的问题。

    一般来说有如下的解决方案。

    例如如下的html,需要将.box内部的img进行垂直居中。

    <div class='box'>
            <img class='img' />
        </div>    

    1. 使用inline-block布局,

    .box {
        width: 200px;
        height: 200px;
        border: 1px solid black;                    
        text-align: center;
    }
    .box:before {
        content: '';
        vertical-align: middle;
        height: 100%;
        display: inline-block;
    }
    .img {
        width: 50px;
        height: 50px;
        display: inline-block;
        vertical-align: middle;
    }    

    需要在页面上加入:before伪元素, 以及将内部的元素调整成inline-block。只要对这两个属性支持的浏览器都可以支持。

    2. 可以使用absulote布局进行定位, 利用margin消除子元素高度和宽度的影响。

    .box {
        width: 200px;
        height: 200px;
        border: 1px solid black;
        position: relative;
    }
    
    .img {
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -25px 0 0 -25px;
        width: 50px;
        height: 50px;
    }

    需要将父节点改成relative布局, 而且子节点需要定高定宽。

    3. 类似的,也可以使用relative进行布局,需要注意的是,内部的img需要标注成display: block。经过实测,firefox对img的默认display为inline。

    .box {
        width: 200px;
        height: 200px;
        border: 1px solid black;        
    }
    
    .img {
        position: relative;
        left: 50%;
        top: 50%;
        margin: -25px 0 0 -25px;            
        background-color: green;
        width: 50px;
        height: 50px;
        display: block;
    }     

    同样的缺点是,需要内部元素定高定宽。

    4. 可以使用transform来进行定位。

    .box {
        width: 200px;
        height: 200px;
        border: 1px solid black;            
    }
    
    .img {
        display: block;
        height: 50px;
        margin: 50% 0 0 50%;
        transform: translate(-50%, -50%);
        width: 50px;
    }

    唯一的缺点是需要对transform的支持。 IE对此属性的支持是IE9.

    5. 使用flex布局

     使用flex-flow: row; align-items: center将其竖直居中。使用margin令其水平居中。

    .box {
        width: 200px;
        height: 200px;
        border: 1px solid black;   
        display: flex;
        flex-flow: row;
        align-items: center;
    }
    
    .img {            
        height: 50px;
        width: 50px;            
        margin: 0 auto;
    }        

    也可以简单的使用margin: auto.

    .box {
        width: 200px;
        height: 200px;
        border: 1px solid black;   
        display: flex;
    }
    
    .img {            
        height: 50px;
        width: 50px;            
        margin: auto;
    }        

     需要对display: flex的支持。

  • 相关阅读:
    mysql创建和删除表
    性能测试工具curlloader(linux)
    Linux安装与硬盘分区
    linux那点事儿(上)
    Linux文件传输与mysql数据库安装
    性能测试工具curlloader二测试分析
    菜鸟学自动化测试(六)selenium 命令之文字范本匹配
    git/github初级运用自如
    开源自动化测试框架Tellurium
    菜鸟学自动化测试(五)selenium命令之定位页面元素
  • 原文地址:https://www.cnblogs.com/rixin/p/4053826.html
Copyright © 2020-2023  润新知