分数居中

src/components/mark/MarkDrawTrack.vue

@@ -1,7 +1,9 @@
 <template>
   <template v-for="(track, index) in trackList" :key="index">
     <div class="score-container" :style="computeTopAndLeft(track)">
-      {{ track.score }}
+      <span class="m-auto">
+        {{ track.score }}
+      </span>
     </div>
   </template>
 </template>
@@ -40,8 +42,8 @@ export default defineComponent({
       //   dy,
       // });
       return {
-        top: (topInsideSlice / sliceImage.naturalHeight) * 100 - 2.6 + "%",
-        left: (leftInsideSlice / sliceImage.naturalWidth) * 100 - 1 + "%",
+        top: (topInsideSlice / sliceImage.naturalHeight) * 100 + "%",
+        left: (leftInsideSlice / sliceImage.naturalWidth) * 100 + "%",
         "font-size": store.setting.uiSetting["answer.paper.scale"] * 2.2 + "em",
       };
     };
@@ -56,8 +58,15 @@ export default defineComponent({
 
 <style scoped>
 .score-container {
-  display: inline-block;
   position: absolute;
+  display: flex;
+  place-content: center;
   color: red;
+
+  /* to center score */
+  width: 200px;
+  height: 200px;
+  margin-top: -100px;
+  margin-left: -100px;
 }
 </style>