盒子里的绝对定位元素发生预期外的像素偏移?

盒子里的绝对定位元素发生预期外的像素偏移

自定义的input checkbox的选择框样式,在不同的分辨率下,代码设置了居中但不居中(是选中时红色的小元素相对于外框不居中!!)

选中checkbox表现

图片看可以看到是不居中的!!尝试过不同的居中方式,还是会在不同的分辨率下会产生偏移,但是放大看确实居中的

代码

  <style>
    .clause-content {
      display: flex;
      flex-direction: row;
      align-items: start;
    }

    .clause-input {
      display: inline-block;
      vertical-align: middle;
      width: 15px;
      height: 15px;
      cursor: pointer;
      position: relative;
      background-color: #fff;
      margin-right: 12px;
      border: 1px solid rgba(237, 30, 14, 0.15);
    }

    .clause-input input {
      opacity: 0;
    }

    .clause-input input:checked+i {
      width: 10px;
      height: 10px;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -5px;
      margin-top: -5px;
      /* transform: translate(-50%, -50%); */
      background-color: #ED1C24;
    }
  </style>
  <div class="clause-content">
    <label class="clause-input checkbox-hack">
      <input type="checkbox" name="clauseEnquiry" class="js_clauseEnquiry" id="clauseEnquiry">
      <i></i>
    </label>
    <label class="clause-text" for="clauseEnquiry">clause.</label>
  </div>