Javascript 如何使此白色正方形默认显示在中间而不是左上角？

我有一个JSFIDLE，白色的正方形总是出现在左上角

我想让白色的正方形出现在中间

我试图更改下面的代码（

x=150，y=150

）

然而，它没有起作用。要使白色方块显示在中心，正确的代码应该是什么

设置完所有内容后，在链接函数中调用

setPosition（）

：

.directive('ngDraggable', function($document) {
  return {
    restrict: 'A',
    scope: {
      dragOptions: '=ngDraggable'
    },
    link: function(scope, elem, attr) {
      var startX, startY, x = 150, y = 150,
          start, stop, drag, container;

      var width  = elem[0].offsetWidth,
          height = elem[0].offsetHeight;

      // Obtain drag options
      if (scope.dragOptions) {
        start  = scope.dragOptions.start;
        drag   = scope.dragOptions.drag;
        stop   = scope.dragOptions.stop;
        var id = scope.dragOptions.container;
        if (id) {
            container = document.getElementById(id).getBoundingClientRect();
        }
      }

      // Bind mousedown event
      elem.on('mousedown', function(e) {
        e.preventDefault();
        startX = e.clientX - elem[0].offsetLeft;
        startY = e.clientY - elem[0].offsetTop;
        $document.on('mousemove', mousemove);
        $document.on('mouseup', mouseup);
        if (start) start(e);
      });

      # The position of the element is not changed until the `setPosition` function 
      # is called
      setPosition()

      // Handle drag event
      function mousemove(e) {
        y = e.clientY - startY;
        x = e.clientX - startX;
        setPosition();
        if (drag) drag(e);
      }

      // Unbind drag events
      function mouseup(e) {
        $document.unbind('mousemove', mousemove);
        $document.unbind('mouseup', mouseup);
        if (stop) stop(e);
      }

      // Move element, within container if provided
      function setPosition() {
        if (container) {
          if (x < container.left) {
            x = container.left;
          } else if (x > container.right - width) {
            x = container.right - width;
          }
          if (y < container.top) {
            y = container.top;
          } else if (y > container.bottom - height) {
            y = container.bottom - height;
          }
        }

        elem.css({
          top: y + 'px',
          left:  x + 'px'
        });
      }
    }
  }

})

指令（'ngDraggable'，函数（$document）{ 返回{ 限制：“A”， 范围：{ dragOptions:'=NGDRAGABLE' }, 链接：功能（范围、要素、属性）{ 变量startX，startY，x=150，y=150， 启动、停止、拖动、容器； 变量宽度=元素[0]。偏移网络宽度， 高度=元素[0]。视线外； //获取拖动选项 if（范围dragOptions）{ 开始=scope.dragOptions.start； 拖动=scope.dragOptions.drag； 停止=scope.dragOptions.stop； var id=scope.dragOptions.container； 如果（id）{ container=document.getElementById（id）.getBoundingClientRect（）； } } //绑定鼠标向下事件 元素on（'mousedown'，函数（e）{ e、 预防默认值（）； startX=e.clientX-elem[0].offsetLeft； startY=e.clientY-elem[0]。offsetTop； $document.on（'mousemove'，mousemove）； $document.on（'mouseup'，mouseup）； 如果（启动）启动（e）； }); #在“设置位置”功能启动之前，元素的位置不会改变 #被称为 设置位置（） //句柄拖动事件 函数mousemove（e）{ y=e.clientY-startY； x=e.clientX-startX； 设置位置（）； 如果（拖动）拖动（e）； } //解除绑定拖动事件 功能鼠标（e）{ $document.unbind（'mousemove'，mousemove）； $document.unbind（'mouseup'，mouseup）； 如果（停止）停止（e）； } //在容器内移动元素（如果提供） 函数setPosition（）{ if（集装箱）{ if（x<容器左）{ x=容器。左； }else if（x>container.right-宽度）{ x=容器。右-宽度； } 如果（y<容器顶部）{ y=容器顶部； }否则，如果（y>容器底部-高度）{ y=容器底部-高度； } } 元素css({ 顶部：y+‘px’， 左：x+‘px’ }); } } } })

---

如果您只想让白色方块从某个位置开始，那么就在样式表中给它指定位置

左：130px；
顶部：130像素；

更新小提琴：

JavaScript用于拖动，而不是定义初始状态

顺便说一下，它是130像素，不是150像素。由于外部div的直径为300px，而内部正方形的尺寸为40px，因此其偏移距离中心需要为-20px

编辑：或者，如果您想独立于容器的大小，请将容器的

位置设置为
相对位置，并按如下方式计算位置：

左：计算（50%-20px）；
顶部：calc（50%-20px）；

新提琴：

请注意，只有现代浏览器支持
calc
当使用绝对定位时，您可以使用
top:50%将元素居中；左：50%然后将元素向后移动其宽度的一半：

这样，不管父容器有多大或多小，
.shape
始终居中

.shape {
    position: absolute;
    width : 40px;
    height: 40px;

    top: 50%;
    margin-top: -20px;

    left: 50%;
    margin-left: -20px;

    background-color: white;
}

试试这个，如果你不想硬编码像素

#container {
   width : 300px;
   height: 300px;
   background-color: black;
   display:table-cell;    
   vertical-align:middle;
   text-align:center;
}

.shape {
    width : 40px;
    height: 40px;
    background-color: white;
    margin-left:auto;
    margin-right:auto;
}

尝试此链接-
无效-它会干扰draggable指令的行为。@Oliver这是使用CSS将绝对定位元素居中的完美有效解决方案。到目前为止，初始状态良好。也许JS需要更多的爱……对于其他一些问题来说，这是一个完美有效的解决方案。@Oliver“什么样的代码才能使白色方块出现在中间？”？我编辑了我自己的答案，以展示如何使用
calc
来完成。你的小提琴没有边距，因此看起来像OP的。这让我的浏览器抱怨混合了http和https内容。另外，如果我把这个CSS放在一个工作的提琴中，它就会停止工作。好像出了什么问题，再按一下RUN按钮。还是一样的问题：关于不安全信息的警告，并且你不能拖动方块。
#container {
   width : 300px;
   height: 300px;
   background-color: black;
   display:table-cell;    
   vertical-align:middle;
   text-align:center;
}

.shape {
    width : 40px;
    height: 40px;
    background-color: white;
    margin-left:auto;
    margin-right:auto;
}