SOURCE

console 命令行工具 X clear

                    
>
console
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Progress Steps</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <div class="box1">第一大
        <div class="box1_1">1</div>
        <div class="box1_2">2</div>
    </div>
    <div class="box2">
        <div class="box2_1">1</div>
    </div>
</body>
<script src="script.js"></script>

</html>
*{
    padding: 0;
    margin: 0;
}

.box1{
    width: 150px;
    height: 150px;
    border: black 1px solid;
    position: relative;
}
.box2{
    margin-top: 5px;
    width: 150px;
    height: 150px;
    border: black 1px solid;
}
.box1 div{
    width: 50px;
    height: 50px;
    border: black 1px solid;
}

.box1 .box1_1{
    position: absolute;
    top: 50%;
    left: 50%;
}

.box2 div{
    width: 50px;
    height: 50px;
    border: black 1px solid;
}


.box2{
    /* 可以让内容居中 */
    display: flex;
    align-items: center;
    justify-content: center;
    
}

.box2 .box2_1{
    /* 可以让内容居中 */
    display: flex;
    align-items: center;
    justify-content: center;
    
}