• 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的支持。

  • 相关阅读:
    JavaScript 设计模式系列 : 单例(Singleton)模式
    JavaScript 设计模式系列 : 工厂模式
    《Python数据分析常用手册》一、NumPy和Pandas篇
    python字符串的方法及注释
    量化投资_TB交易开拓者A函数和Q函数常见组合应用
    凯利公式
    python数据分析入门学习笔记
    VBA语言基础
    VBA遍历文件夹下文件文件实用源码
    如何判断单链表里面是否有环【转载】
  • 原文地址:https://www.cnblogs.com/rixin/p/4053826.html
Copyright © 2020-2023  润新知