如何将div中的绝对定位元素居中？

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

.child {
  position: absolute;
}

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

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

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

.child {
  position: absolute;
  top: calc(50% - 1/2 * [child's height]);
  left: calc(50% - 1/2 * [child's width]);
}