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

    1.line-height 属性

      line-height一般用于设置子级为行的的元素,当line-height设置的和父级元素height相等的时候实现垂直居中

    <style>
            .box{
                 300px;
                height: 300px;
                background: #f00;
                text-align: center;
            }
            .box span{
                background: #fff;
                line-height: 300px;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <span>要剧中的内容</span>
        </div>
    </body>
    

      

     2.使用flex布局

       

    <style>
            .box{
                 300px;
                height: 300px;
                background: #f00;
                display: flex;
                justify-content: center;/*水平居中*/
                align-items: center;/*垂直居中中*/
            }
            .box span{
                background: #fff;
                
            }
        </style>
    </head>
    <body>
        <div class="box">
            <span>要剧中的内容</span>
        </div>
    </body>
    

      3.绝对定位+transfrom属性

      

    <style>
            .box{
                 300px;
                height: 300px;
                background: #f00;
                position: relative;
            }
            .box span{
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);/*参照自己当前的位置,向 x, y轴 进行平移*/
                display: block;
                 100px;
                height: 100px;
                background: #fff;  
            }
        </style>
    </head>
    <body>
        <div class="box">
            <span>要剧中的内容</span>
        </div>
    </body>
    

      4.通过绝对定位 + margin auto

    <style>
            .box{
                 300px;
                height: 300px;
                background: #f00;
                position: relative;
            }
            .box span{
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                margin: auto;
                display: block;
                 100px;
                height: 100px;
                background: #fff;  
            }
        /*也可以使用另一种方式,把margin设为自身的一般进行偏移*/

          .box span{
                    position: absolute;
                    left: 50%;
                   top: 50%;
                    margin-top: -50px;
                    margin-left: -50px;
                    display: block;
                     100px;
                    height: 100px;
                    background: #fff;  
                }
        </style>
    </head>
    <body>
        <div class="box">
            <span>要剧中的内容</span>
        </div>
    </body>
    

      

  • 相关阅读:
    Java Mybatis 传参方式
    html Js跨域提交数据方法,跨域提交数据后台获取不到数据
    uuidgen
    shell 案例
    docker搭建tomcat环境
    redis主从+哨兵模式(借鉴)
    ansible-playbook 案例
    NFS
    mysql -sql语句
    定时任务crontab命令
  • 原文地址:https://www.cnblogs.com/mwxz/p/14456629.html
Copyright © 2011-2022 走看看