用transform使元素居中的bug

通过position和transform使元素居中: html:

<div class="box" @click='move' id='box'></div>

css:

.box{
  width: 6.25em;
  height: 6.25em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  background: orange;
  transition: all 1s ease;
}

bug:

要是让divleft: 0;，div.box只显示一半,出去一半。是因为在transform: translate3d(-50%, -50%, 0)，这个时候可以通过定义元素的translateX的值来修正这个小bug。

解决方法：

在让div.box的left = 0的时候，让transform: translate3d(0, -50%, 0)。在methods中:

move() {
   var box = document.getElementById('box')
   box.style.left = 0;
   box.style.transform = 'translate3d(0, -50%,0)';
}

全部代码：

<template>
  <div class="transformLeft0Bug">
   <div class="box" @click='move' id='box'></div>
  </div>
</template>
<script>
export default {
  name: "transformLeft0Bug",
  data: () => ({
  }),
  methods: {
    move() {
       var box = document.getElementById('box')
       box.style.left = 0;
       box.style.transform = 'translate3d(0, -50%,0)';
    }
  }
}
</script>
<style lang="scss" scoped>
.transformLeft0Bug{
  width: 18.75em;
  height: 18.75em;
  position: relative;
  margin-left: 20em;
  margin-top: 1.25em;
  border: 0.0625em solid #ddd;
  .box{
    width: 6.25em;
    height: 6.25em;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    background: orange;
    transition: all 1s ease;
  }
}
</style>