如何使具有绝对位置的 div 居中

在 CSS 中，要使绝对定位的 div 居中，需要以下步骤：

1. 给外层容器设置相对定位 (position: relative)，确保绝对定位的 div 相对于其父元素进行定位；

2. 给绝对定位的 div 设置 top: 50%; left: 50%;，让其居中，但此时它的左上角会叠到父元素的中心点；

3. 通过 margin 负值来校正左上角的位置，使其居中。margin-top 和 margin-left 的值分别为该元素高度和宽度的一半，即 margin: -height/2 0 0 -width/2。

下面是示例代码：

.parent {
  position: relative; /* 1. 相对定位 */
}

.child {
  position: absolute;
  top: 50%; /* 2. 垂直居中 */
  left: 50%; /* 2. 水平居中 */
  transform: translate(-50%, -50%); /* 3. 校正位置 */
}

其中，可以使用 transform 属性的 translate() 函数来进行位置校正，简洁有效。

以上就是使具有绝对位置的 div 居中的方法。