DIV盒子垂直居中水平居中

HTML

 <div class="parent">
    <div class="child"></div>
  </div>

CSS

.parent {
    background-color: rgb(204, 48, 74);
    width: 200px;
    height: 200px;
  }

  .child {
    background-color: rgb(39, 175, 57);
    width: 100px;
    height: 100px;
  }

方法一：定位

上百分之50 左百分之50 然后回退盒子的一半距离

  .parent {
    position: relative;
    background-color: rgb(204, 48, 74);
    width: 200px;
    height: 200px;
  }

  .child {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    background-color: rgb(39, 175, 57);
    width: 100px;
    height: 100px;
  }

方法二：margin:auto;

 .parent {
    position: relative;
    background-color: rgb(204, 48, 74);
    width: 200px;
    height: 200px;
  }

  .child {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgb(39, 175, 57);
    width: 100px;
    height: 100px;
  }

方法三：display：flex

 .parent {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(204, 48, 74);
    width: 200px;
    height: 200px;
  }

  .child {
    background-color: rgb(39, 175, 57);
    width: 100px;
    height: 100px;
  }

方法四：transform

  .parent {
    position: relative;
    background-color: rgb(204, 48, 74);
    width: 200px;
    height: 200px;
  }

  .child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgb(39, 175, 57);
    width: 100px;
    height: 100px;
  }

方法五：calc计算属性 父盒子-子盒子宽~of~高 ÷ 2

  .parent {
    position: relative;
    background-color: rgb(204, 48, 74);
    width: 200px;
    height: 200px;
  }

  .child {
    position: absolute;
    top: calc(50px);
    left: calc(50px);
    background-color: rgb(39, 175, 57);
    width: 100px;
    height: 100px;
  }

方法六 margin-left: auto;`` margin-right: auto; 与方法二同理

  .parent {
            background-color: rgb(204, 48, 74);
            width: 200px;
            height: 200px;
            overflow: hidden;
        }

        .child {
            margin-top: 25%;
            margin-left: auto;
            margin-right: auto;
            background-color: rgb(39, 175, 57);
            width: 100px;
            height: 100px;
        }