一.利用flex布局,实现效果

比较轻松的方式，在实际应用中用的较多

代码如下:

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>子盒子水平垂直居中-flex布局</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .box {
      display: flex;
      justify-content: center;
      align-items: center;

      /* align-items:flex-end ; */
      width: 500px;
      height: 500px;
      background-color: darkgreen;
      margin: 120px auto;
    }

    .box div {
      width: 200px;
      height: 200px;
      background-color: red;
    }
  </style>
</head>

<body>
  <div class="box">
    <div>
      <h1>
        <br>111
        <br>111
        <br>111
      </h1>
    </div>
  </div>
</body>

</html>

效果如下:

二.利用绝对定位实现效果

利用子绝父相，给父盒子添加相对定位,子盒子添加绝对定位
代码如下:

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .father {
      position: relative;
      width: 600px;
      height: 600px;
      background-color: pink;
      margin: auto;
    }

    .son {
      /* 绝对定位 */
      position: absolute;
      /* 1 先让子盒子往右移动父盒子的一半 left: 50%; */
      left: 50%;
      /* 先让子盒子往下移动父盒子的一半 top:  50%; */
      top: 50%;
      /* 2 再让子盒子移动自身宽度的一半  采用 margin 负值 */
      margin-left: -100px;
      /* 再让子盒子移动自身高度的一半 采用 margin 负值 */
      margin-top: -150px;
      width: 200px;
      height: 300px;
      background-color: green;
    }           
  </style>
</head>
<body>
  <div class="father">
    <div class="son"></div>
  </div>
</body>

</html>

效果如下:

三.利用位移实现效果

代码如下:

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
      /* 相对定位 */
      position: relative;
      width: 500px;
      height: 500px;
      border: 1px solid #000;
      margin: 100px auto;
      background-color: aquamarine;
    }

    .son {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 100px;
      height: 100px;
      background-color: pink;
      /* 百分比相对于盒子自己的宽高 */
      transform: translate(-50%, -50%);
    }
  </style>
</head>

<body>
  <div class="father">
    <div class="son"></div>
  </div>
</body>

</html>