1
.son {
2
  background-color: red;
3
  width: 100px;
4
  height: 100px;
5
}
6
.father {
7
  width: 500px;
8
  height: 500px;
9
  background-color: skyblue;
10
  display: flex;
11
  justify-content: center;
12
  align-items: center;
13
}

1
.father {
2
  background-color: skyblue;
3
  width: 500px;
4
  height: 500px;
5
  position: relative;
6
}
7
.son {
8
  background-color: red;
9
  width: 100px;
10
  height: 100px;
11
  position: absolute;
12
  top: 50%;
13
  left: 50%;
14
  transform: translate(-50%, -50%);
15
}

1
.father {
2
  background-color: skyblue;
3
  width: 500px;
4
  height: 500px;
5
  position: relative;
6
}
7
.son {
8
  background-color: red;
9
  width: 100px;
10
  height: 100px;
11
  position: absolute;
12
  top: 0;
13
  left: 0;
14
  bottom: 0;
15
  right: 0;
16
  margin: auto;
17
}

1
.father {
2
            width: 300px;
3
            padding: 100px;
4
            vertical-align: middle;
5
            display: table-cell;
6
            background-color: pink;
7
        }
8

9
        .son {
10
            height: 100px;
11
            background-color: skyblue;
12
        }