子盒子位于父盒子之中，且子盒子水平居中垂直居中

要让子盒子水平居中垂直居中可以使用以下 CSS 样式：

.parent {
  position: relative; /* 父盒子设置为相对定位 */
}

.child {
  position: absolute; /* 子盒子设置为绝对定位 */
  top: 50%; /* 向下偏移50% */
  left: 50%; /* 向右偏移50% */
  transform: translate(-50%, -50%); /* 使用transform属性水平和垂直居中 */
}

上述样式中，我们将父盒子设置为相对定位，将子盒子设置为绝对定位，并使用 top 和 left 属性将其偏移到父盒子的中心位置。然后使用 transform 属性将子盒子水平居中和垂直居中。其中 translate(-50%, -50%) 表示将子盒子向左偏移50%和向上偏移50%，即将子盒子的中心点对齐到父盒子的中心点。