1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport"
    8.     content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum=1.0, user-scalable=no">
    9.   <title>子绝父相</title>
    10.   <link rel="stylesheet" href="index.css">
    11. </head>
    13. <body>
    14.   <div class="father">
    15.     <div class="son"></div>
    16.   </div>
    17. </body>
    19. </html>
    .father {
  height: 500px;
  background-color: blue;
  position: relative;
}

.son {
  width: 200px;
  height: 200px;
  background-color: skyblue;
  position: absolute;
  top: calc(50% - 200px / 2);
  left: calc(50% - 200px / 2);
}

    image.png