CSS布局垂直居中(已知高度和未知高度)

已知高度使用用传统的绝对定位-margin高度的一半方法,这里不多介绍。
未知高度常用的三种方法:
1.表格 cell-table方法

.parent1{
display: table;
background-color: #FD0C70;
}
.parent1 .child{
display: table-cell;
vertical-align: middle;
}

2. 决定定位 transform:translate(-50%;-50%)

.parent2{
position: relative;
}
.parent2 .child{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

3.弹性布局 flex

.parent3{
display: flex;
justify-content: center;
align-items: center;
}

 

 

实现深拷贝函数

ES6的Object.assign()函数其实只能拷贝一层,所以需要手写一个深拷贝函数。
有个小技巧判断一个对象是否为数组,instanceof是否等于Array。
主要思路就是使用in方法遍历对象的每个key和值,用递归的方式拷贝到新的对象里面去

function deepClone(obj) {
    let newObj = obj instanceof Array ? [] : {}
    if (obj && typeof obj === "object") {
        for (let key in obj) {
            if (obj.hasOwnProperty(key)) {
                newObj[key] = (obj && typeof obj[key] === 'object') ? deepClone(obj[key]) : obj[key];
            }
        }
    }
    return newObj
}