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>
    

      

  • 相关阅读:
    查看Ubuntu操作系统位数 Anny
    no such file to load zlib when using gem install Anny
    Error: shasum check failed for /tmp/npm1316662414557/13166624159930.13772299513220787/tmp.tgz Anny
    Future接口的应用
    ScheduledThreadPool
    弄了个群
    阻塞与中断
    获得CPU个数
    文件路径问题
    一个日志服务器的框架
  • 原文地址:https://www.cnblogs.com/mwxz/p/14456629.html
Copyright © 2011-2022 走看看