如何设置position:absolute的可拖拽div初始居中于父容器？

核心修改方案 #

要让设置了position: absolute的.move元素在父容器#all中水平居中，只需调整.move的CSS样式：

.move {
    cursor: move;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

如果需要同时实现垂直居中，可以修改为：

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

补充说明 #

1. 父容器高度处理
   由于绝对定位元素脱离文档流，父容器#all的高度会塌陷为0。如果需要垂直居中效果，需要给#all设置高度，比如让它占满整个视口高度：

   #all {
       position: relative;
       margin: 0 auto;
       width: 100%;
       min-height: 100vh; /* 让容器占满视口高度 */
   }
   

2. 为什么之前的方法无效
   你之前给header设置margin: 0 auto; left: 0; right: 0;的思路错误：

   • header是.move的子元素，它的居中只会在.move内部生效，无法改变.move本身在父容器中的位置。
   • 绝对定位元素的位置需要直接通过自身的left/right/top/bottom或transform属性调整，子元素的样式无法影响父元素的绝对定位位置。

完整CSS代码 #

* {
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
    border: 1px solid black;
    line-height: 1.1;
    margin: 0;
}

#all {
    position: relative;
    margin: 0 auto;
    width: 100%;
    min-height: 100vh;
}

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

内容的提问来源于stack exchange，提问作者stackedandcracked