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;
}