zoukankan      html  css  js  c++  java
  • 关于css实现水平及垂直居中的方法记录

    1 关于css实现水平垂直居中的一些方法:

    .css的定位:用margin,padding,position

    position:absolute;   //绝对定位,一般父级元素采用relative来配合使用,如果父级没有定位,将把body标签作为父级定位来使用

    用position和margin的方法来实现两个div盒子的水平垂直居中:

    html:

    <body>
        <div class="parent">
            <div class="children">这里是子盒子</div>
        </div>
    </body>

    css:

     <style>
            .parent{
                background-color:aquamarine;
                300px;
                height:300px;
                position:relative;
            }
            .children{
                background-color:yellow;
                100px;
                height:100px;
                position:absolute;
                top: 0%;
                right: 0%;
                bottom:0%;
                left:0%;
                margin:auto;
            }
            /* .children{
                
                100px;
                height:100px;
                position:absolute;
                top:100px;
                left:100px;
            } */
        </style>
     用flex布局实现:用justify-content和align-items来设置水平轴和垂直轴的定位

    css:

    <style>
        .parent {
            background-color: aquamarine;
            width: 300px;
            height: 300px;
            display: flex;
            /* 水平 */
            justify-content: center;
            /* 垂直 */
            align-items: center;
        }
        
        .children {
            background-color: yellow;
            width: 100px;
            height: 100px;
        }
        /* .children{
            
            100px;
            height:100px;
            position:absolute;
            top:100px;
            left:100px;
        } */
    </style>

      

    效果:

     .inline-height设置行高来实现垂直居中,text-align:center来设置水平居中
            .parent{
                background-color:aquamarine;
                width:300px;
                height:300px;
                text-align: center;
            }
            .children{
                display:inline-block;
                line-height:300px;
    
            }

    line-height:inherit;  //规定从父元素那里继承line-height的值

    margin:inherit;   //规定从父元素那里继承margin的值

    2 关于css层叠z-index的记录

     z-index:属性在position(非stastic)中有效,数值可正可负,数值越大,离屏幕越近,比较要看它显示的不同的级别

  • 相关阅读:
    帆软—ORA-28040: No matching authentication protocol;
    Vmware虚拟机三种网络模式详解(转)
    ABAP—权限对象设计及权限检查
    ABAP—SM30维护表时提示“客户XXX有“不可修改”的状态”
    ABAP—SM维护表及标题“+”处理
    NC—语义模型调用存储过程(转)
    ABAP—多页签SHEET、选项参数或block隐藏
    oracle—聚合函数(max、min、avg、sum、count)
    oracle—decode、nvl、rownum、like、all、any使用
    从零开始的react入门教程(七),react中的状态提升,我们为什么需要使用redux
  • 原文地址:https://www.cnblogs.com/Zxq-zn/p/11601929.html
Copyright © 2011-2022 走看看