• 盒子居中的方法


    //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>
  • 相关阅读:
    分布式任务调度平台XXL-JOB
    在线文档分享工具 ShowDoc
    SVN 资源权限管理系统 SVNAdmin
    JFinal Weixin 微信极速 SDK
    Mybatis 增强工具包 Mybatis-Plus
    认识与入门:Markdown
    【Github】如何删除github上的项目
    【IntelliJ 】IntelliJ IDEA 自动导入包 快捷方式 关闭重复代码提示
    【Eclipse+IntelliJ反编译】Eclipse/IntelliJ IDEA反编译查看源码及注释
    【Eclipse】eclipse安装JAVA反编译插件
  • 原文地址:https://www.cnblogs.com/lxsunny/p/13791109.html
Copyright © 2020-2023  润新知