• 盒子居中的方法


    //html部分
    <div class="main_box">
                <div class="box"></div>
    </div>

    第一种:

    <style type="text/css">
            .main_box {
                height: 50rem;
                 50rem;
                box-sizing: border-box;
                border:1px solid #00FFFF;
                margin:0 auto;
                position: relative;
            }
    
            .box {
                height: 100px;
                 100px;
                box-sizing: border-box;
                border:1px solid #00FFFF;
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                margin: auto;
            }
        </style>

    第二种:

    <style type="text/css">
            .main_box {
                height: 50rem;
                 50rem;
                box-sizing: border-box;
                border:1px solid #00FFFF;
                margin:0 auto;
                position: relative;
            }
    
            .box {
                height: 100px;
                 100px;
                box-sizing: border-box;
                border:1px solid #00FFFF;
                position: absolute;
                left: 50%;
                top: 50%;
                margin-top: -50px;
                margin-left: -50px;
            }
        </style>

    第三种:

    <style type="text/css">
            .main_box {
                height: 500px;
                 500px;
                box-sizing: border-box;
                border:1px solid #00FFFF;
                margin:0 auto;
                position: relative;
            }
    
            .box {
                height: 100px;
                 100px;
                box-sizing: border-box;
                border:1px solid #00FFFF;
                position: absolute;
                left: 250px;
                top: 250px;
                margin-top: -50px;
                margin-left: -50px;
            }
        </style>

    第四种:

    <style type="text/css">
            .main_box {
                height: 500px;
                 500px;
                box-sizing: border-box;
                border:1px solid #00FFFF;
                margin:0 auto;
                position: relative;
            }
    
            .box {
                height: 100px;
                 100px;
                box-sizing: border-box;
                border:1px solid #00FFFF;
                position: absolute;
                left: 250px;
                top: 250px;
                transform: translate(-50%,-50%);
            }
        </style>

    第五种:

    <style type="text/css">
            .main_box {
                height: 500px;
                 500px;
                box-sizing: border-box;
                border:1px solid #00FFFF;
                margin:0 auto;
                position: relative;
            }
    
            .box {
                height: 100px;
                 100px;
                box-sizing: border-box;
                border:1px solid #00FFFF;
                position: absolute;
                left: 250px;
                top: 250px;
                transform: translate(-50px,-50px);
            }
        </style>

    第六种:

    <style type="text/css">
            .main_box {
                height: 500px;
                 500px;
                box-sizing: border-box;
                border:1px solid #00FFFF;
                margin:0 auto;
                position: relative;
            }
    
            .box {
                height: 100px;
                 100px;
                box-sizing: border-box;
                border:1px solid #00FFFF;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50px,-50px);
            }
        </style>

    第七种:

    <style type="text/css">
            .main_box {
                height: 500px;
                 500px;
                box-sizing: border-box;
                border:1px solid #00FFFF;
                margin:0 auto;
                position: relative;
            }
    
            .box {
                height: 100px;
                 100px;
                box-sizing: border-box;
                border:1px solid #00FFFF;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
            }
        </style>

    第八种:

    <style type="text/css">
            .main_box {
                height: 500px;
                 500px;
                box-sizing: border-box;
                border:1px solid #00FFFF;
                margin:0 auto;
                display: flex;
                justify-content: center;
                align-items: center;
            }
    
            .box {
                height: 100px;
                 100px;
                box-sizing: border-box;
                border:1px solid #00FFFF;
                
            }
        </style>
  • 相关阅读:
    混沌的艺术--- YChaos通过数学公式生成混沌图像
    相声段子:How Are You
    太阳崇拜---64幅由算法生成的八芒星图像
    自然的密码---36幅由算法生成的六芒星图像
    雪花六出---几幅算法生成的雪花图像,并祝大家平安夜和圣诞节快乐
    18个分形图形的GIF动画演示
    python的with用法(参考)
    彻底解决django 2.2以上版本与mysql兼容性问题(不用改源码)
    python操作MySQL数据库的三个模块
    MySql 外键约束 之CASCADE、SET NULL、RESTRICT、NO ACTION分析和作用
  • 原文地址:https://www.cnblogs.com/lxsunny/p/13791109.html
Copyright © 2020-2023  润新知