如何使div垂直水平居中

使 div 垂直水平居中

<style>
  .parent {
    width: 600px;
    height: 600px;
  }
  .child {
    width: 200px;
    height: 200px;
    background-color: rebeccapurple;
  }
</style>
...
<div class="parent">
  <div class="child"></div>
</div>
...

方案一

.child {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

方案二

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

方案三

.parent {
  display: grid;
}
.child {
  align-self: center;
  justify-self: center;
}

方案四

.parent {
  text-align: center;
}
.parent::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 100%;
  vertical-align: middle;
}
.child {
  display: inline-block;
  vertical-align: middle;
}