1 Box model is centered horizontally and vertically

  • Methods a
        .father {
            position: relative;
            border: black solid 1px;
            background-color: rgb(207, 64, 131);
            width: 500px;
            height: 500px;
        }

        .children {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -50px;
            margin-left: -50px;
            border: black solid 1px;
            background-color: rgb(227, 240, 241);
            width: 100px;
            height: 100px;
        } 
Copy the code
  • Method 2
        .father {
            position: relative;
            border: black solid 1px;
            background-color: rgb(207, 64, 131);
            width: 500px;
            height: 500px;
        }

        .children {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border: black solid 1px;
            background-color: rgb(227, 240, 241);
            width: 100px;
            height: 100px;
        } 
Copy the code
  • Methods three
.father {
            display: flex;
            align-items: center;
            justify-content: center;
            border: black solid 1px;
            background-color: rgb(207, 64, 131);
            width: 500px;
            height: 500px;
        }

        .children {
            border: black solid 1px;
            background-color: rgb(227, 240, 241);
            width: 100px;
            height: 100px;
        }
Copy the code
  • Methods four
.father {
            position: relative;
            background-color: rgb(207, 64, 131);
            width: 500px;
            height: 500px;
        }

        .children {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            background-color: rgb(227, 240, 241);
            width: 100px;
            height: 100px;
        }
Copy the code

2 use JS to achieve array deduplication

  • Methods a
Var numbers = [10, 20, 100, 40, 50, 60, 50, 40, 30, 20, 10] Var numbers2 = [...new set (numbers)] for (var I = 0; i < numbers2.length; i++) { console.log(numbers2[i]) }Copy the code
  • Method 2
// If the value is -1, it does not exist. Let numbers = [1, 2, 3, 4, 5, 6, 2, 8, 5, 6] let numbers2 = [] for (let I = 0; i < numbers.length; i++) { if (numbers2.indexOf(numbers[i]) == -1) { numbers2.push(numbers[i]); } } console.log(numbers2)Copy the code
  • Methods three
   function unique(arr) {
            var newArr = [];
            for (var i = 0; i < arr.length; i++) {
                for (var j = i + 1; j < arr.length; j++) {
                    if (arr[i] == arr[j]) {
                        ++i;
                    }
                }
                newArr.push(arr[i]);
            }
            return newArr;
        }
        var arr = [1, 2, 2, 3, 5, 3, 6, 5];
        var newArr = unique(arr);
        console.log(newArr);
Copy the code