Loading

关于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;
            width:300px;
            height:300px;
            position:relative;
        }
        .children{
            background-color:yellow;
            width:100px;
            height:100px;
            position:absolute;
            top: 0%;
            right: 0%;
            bottom:0%;
            left:0%;
            margin:auto;
        }
        /* .children{
            
            width: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{
        
        width: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)中有效，数值可正可负，数值越大，离屏幕越近，比较要看它显示的不同的级别

posted @ 2019-09-28 22:45  逝zxq  阅读(197)  评论(0)  编辑  收藏  举报