如何使這個白色方塊默認顯示在中心而不是頂部左上角？

Question

我有這個jsfiddle，白色方塊總是出現在左上角的頂部。

http://jsfiddle.net/helpme128/3kwwo53t/2/

我想讓白色方塊出現在中心。

我試着讓代碼改變如下（ x = 150, y = 150 ）;

.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;

但是，它沒有用。 什么是正確的代碼，讓白色方塊出現在中心？

Answer 1

如果你想要做的就是讓白色方塊在某個位置開始，那么在樣式表中給它一個位置。

left: 130px;
top: 130px;

更新小提琴： http ： //jsfiddle.net/MrLister/3kwwo53t/6/

JavaScript用於拖動，而不是用於定義初始狀態。

順便說一句，它是130px，而不是150.由於外部div是300px橫跨，內部正方形測量40px，它的偏移需要距離中心-20px。

編輯：或者，如果您想獨立於容器的大小，請將容器的position為relative並按如下方式計算位置：

left: calc(50% - 20px);
top: calc(50% - 20px);

較新的小提琴： http ： //jsfiddle.net/MrLister/3kwwo53t/7/

請注意，只有現代瀏覽器支持calc 。

Answer 2

試試這個，如果你不想硬編碼像素，

#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;
}

試試這個鏈接 - https://jsfiddle.net/3kwwo53t/8/

Answer 3

完成所有設置后，在鏈接功能中調用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'
        });
      }
    }
  }

})

Answer 4

使用絕對定位時，您可以使用top: 50%; left: 50%;將元素居中top: 50%; left: 50%; top: 50%; left: 50%; 然后將元素移回其寬度的一半：

這樣，父容器的.shape都.shape - .shape將始終居中。

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

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

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

    background-color: white;
}

http://jsfiddle.net/3kwwo53t/5/