如何使用父div上角的复选框使div垂直和水平居中

要使用父div上角的复选框使div垂直和水平居中，可以通过以下步骤实现：

1. 首先，在父div中创建一个复选框元素，并设置其为绝对定位（position: absolute）。
2. 将复选框的左边距（left）和上边距（top）都设置为50%。
3. 使用CSS的transform属性，将复选框向左和向上移动自身宽度和高度的一半，以实现居中对齐。可以使用translateX(-50%)和translateY(-50%)来实现。
4. 确保父div具有相对定位（position: relative），以便复选框相对于父div进行定位。
5. 最后，将要居中的div元素放置在父div中，并设置其为绝对定位（position: absolute）。
6. 将要居中的div的左边距（left）和上边距（top）都设置为50%。
7. 使用CSS的transform属性，将要居中的div向左和向上移动自身宽度和高度的一半，以实现居中对齐。同样可以使用translateX(-50%)和translateY(-50%)来实现。

以下是一个示例代码：

HTML代码：

<div class="parent">
  <input type="checkbox" class="checkbox">
  <div class="centered-div">
    <!-- 要居中的内容 -->
  </div>
</div>

CSS代码：

.parent {
  position: relative;
  width: 100%;
  height: 100%;
}

.checkbox {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.centered-div {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}

这样，父div上角的复选框将会使内部的div垂直和水平居中对齐。你可以根据实际需求修改父div和内部div的样式和内容。