作为一个资深前端，请问vue-drag-resize怎么让元素在容器中间

vue-drag-resize 是一个用于实现拖拽和缩放功能的 Vue 组件库，如果您想要让拖拽和缩放的元素在容器中间，可以通过一些 CSS 样式来实现。

假设您的容器是一个固定宽高的 div，您可以将该 div 设置为相对定位（position: relative），并将拖拽和缩放的元素设置为绝对定位（position: absolute）。然后，通过计算元素的宽高以及容器的宽高，可以将元素定位到容器中间。

具体的实现方法如下：

<template>
  <div class="container">
    <vue-drag-resize :w="width" :h="height" :x="x" :y="y" @dragging="onDragging" @resizing="onResizing">
      <!-- 元素内容 -->
    </vue-drag-resize>
  </div>
</template>

<script>
export default {
  data() {
    return {
      width: 100,
      height: 100,
      x: 0,
      y: 0
    }
  },
  methods: {
    onDragging(event) {
      // 拖拽事件处理
    },
    onResizing(event) {
      // 缩放事件处理
    }
  }
}
</script>

<style>
.container {
  position: relative;
  width: 500px;
  height: 500px;
}

.vue-drag-resize {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>

在上面的示例中，将容器设置为相对定位，并将拖拽和缩放的元素设置为绝对定位。通过将元素的 left 和 top 设置为 50%，再通过 transform 属性将元素向左和向上移动宽度和高度的一半，就可以将元素居中在容器中了。

需要注意的是，这种方法仅适用于容器和元素的宽高已知并且固定的情况。如果容器或元素的宽高不固定，或者容器的宽高是相对于父元素的百分比，那么需要通过 JavaScript 计算来实现居中效果。