关于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)中有效，数值可正可负，数值越大，离屏幕越近，比较要看它显示的不同的级别