在页面上垂直和水平居中<div>的最佳方法是什么？

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

.child {
  /* 其他样式 */
}

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

.parent {
  display: grid;
  justify-items: center;
  align-items: center;
  height: 100vh;
}

.child {
  /* 其他样式 */
}

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