第一种方式

定位
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.box{
    width: 400px;
    height: 400px;
    position:relative;
    border: 1px solid #0D0D0D;
}
.box div{
    width: 100px;
    height: 100px;
    position:absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: palegoldenrod;
}

第二种方式

flex布局
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.box{
    width: 400px;
    height: 400px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    border: 1px solid #0D0D0D;
}
.box div{
    width: 100px;
    height: 100px;
    background-color: palegoldenrod;
}
示例

Image text