diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss
index 2d2a00c..d4fa6cd 100644
--- a/src/assets/scss/main.scss
+++ b/src/assets/scss/main.scss
@@ -159,6 +159,10 @@ button {
   @apply border border-solid border-gray-500;
 }
 
+.center-element {
+  @apply absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2;
+}
+
 .text-pixel {
   @apply text-white font-ui drop-shadow-pixel-black;
 }
diff --git a/src/components/gameMaster/assetManager/partials/characterHair/CharacterHairList.vue b/src/components/gameMaster/assetManager/partials/characterHair/CharacterHairList.vue
index c9b2e7b..a7c4394 100644
--- a/src/components/gameMaster/assetManager/partials/characterHair/CharacterHairList.vue
+++ b/src/components/gameMaster/assetManager/partials/characterHair/CharacterHairList.vue
@@ -25,7 +25,7 @@
     </div>
     <div class="absolute w-12 h-12 bottom-2.5 right-2.5">
       <button class="fixed min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop">
-        <img class="absolute invert w-8 h-8 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
+        <img class="invert w-8 h-8 center-element rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
       </button>
     </div>
   </div>
diff --git a/src/components/gameMaster/assetManager/partials/characterType/CharacterTypeList.vue b/src/components/gameMaster/assetManager/partials/characterType/CharacterTypeList.vue
index 6809725..9cfc713 100644
--- a/src/components/gameMaster/assetManager/partials/characterType/CharacterTypeList.vue
+++ b/src/components/gameMaster/assetManager/partials/characterType/CharacterTypeList.vue
@@ -25,7 +25,7 @@
     </div>
     <div class="absolute w-12 h-12 bottom-2.5 right-2.5">
       <button class="fixed min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop">
-        <img class="absolute invert w-8 h-8 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
+        <img class="invert w-8 h-8 center-element rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
       </button>
     </div>
   </div>
diff --git a/src/components/gameMaster/assetManager/partials/item/itemList.vue b/src/components/gameMaster/assetManager/partials/item/itemList.vue
index 2cdcc43..cfb788e 100644
--- a/src/components/gameMaster/assetManager/partials/item/itemList.vue
+++ b/src/components/gameMaster/assetManager/partials/item/itemList.vue
@@ -22,7 +22,7 @@
     </div>
     <div class="absolute w-12 h-12 bottom-2.5 right-2.5">
       <button class="fixed min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop">
-        <img class="absolute invert w-8 h-8 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
+        <img class="invert w-8 h-8 center-element rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
       </button>
     </div>
   </div>
diff --git a/src/components/gameMaster/assetManager/partials/object/ObjectList.vue b/src/components/gameMaster/assetManager/partials/object/ObjectList.vue
index 6f42696..e74c190 100644
--- a/src/components/gameMaster/assetManager/partials/object/ObjectList.vue
+++ b/src/components/gameMaster/assetManager/partials/object/ObjectList.vue
@@ -21,7 +21,7 @@
     </div>
     <div class="absolute w-12 h-12 bottom-2.5 right-2.5">
       <button class="fixed min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop">
-        <img class="absolute invert w-8 h-8 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
+        <img class="invert w-8 h-8 center-element rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
       </button>
     </div>
   </div>
diff --git a/src/components/gameMaster/assetManager/partials/sprite/SpriteList.vue b/src/components/gameMaster/assetManager/partials/sprite/SpriteList.vue
index 2ceb749..6cf6c04 100644
--- a/src/components/gameMaster/assetManager/partials/sprite/SpriteList.vue
+++ b/src/components/gameMaster/assetManager/partials/sprite/SpriteList.vue
@@ -17,7 +17,7 @@
     </div>
     <div class="absolute w-12 h-12 bottom-2.5 right-2.5">
       <button class="fixed min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop">
-        <img class="absolute invert w-8 h-8 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
+        <img class="invert w-8 h-8 center-element rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
       </button>
     </div>
   </div>
diff --git a/src/components/gameMaster/assetManager/partials/tile/TileList.vue b/src/components/gameMaster/assetManager/partials/tile/TileList.vue
index 1541bc8..44ac101 100644
--- a/src/components/gameMaster/assetManager/partials/tile/TileList.vue
+++ b/src/components/gameMaster/assetManager/partials/tile/TileList.vue
@@ -21,7 +21,7 @@
     </div>
     <div class="absolute w-12 h-12 bottom-2.5 right-2.5">
       <button class="fixed min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop">
-        <img class="absolute invert w-8 h-8 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
+        <img class="invert w-8 h-8 center-element rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
       </button>
     </div>
   </div>
diff --git a/src/components/gui/CharacterProfile.vue b/src/components/gui/CharacterProfile.vue
index 8d92ca1..c901507 100644
--- a/src/components/gui/CharacterProfile.vue
+++ b/src/components/gui/CharacterProfile.vue
@@ -40,17 +40,17 @@
             <img src="/assets/placeholders/inventory_player.png" class="w-8 h-auto" />
             <div class="flex flex-col items-end gap-0.5">
               <div class="w-9 h-9 default-border rounded-sm bg-gray relative hover:bg-gray-600">
-                <img class="absolute w-6 h-6 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" src="/assets/icons/profile/helmet.svg" />
+                <img class="w-6 h-6 center-element" src="/assets/icons/profile/helmet.svg" />
               </div>
               <div class="w-9 h-9 default-border rounded-sm bg-gray relative hover:bg-gray-600">
-                <img class="absolute w-6 h-6 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" src="/assets/icons/profile/chestplate.svg" />
+                <img class="w-6 h-6 center-element" src="/assets/icons/profile/chestplate.svg" />
               </div>
               <div class="flex gap-0.5 items-end">
                 <div class="w-6 h-6 default-border rounded-sm bg-gray relative hover:bg-gray-600">
-                  <img class="absolute w-4 h-4 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" src="/assets/icons/profile/boots.svg" />
+                  <img class="w-4 h-4 center-element" src="/assets/icons/profile/boots.svg" />
                 </div>
                 <div class="w-9 h-9 default-border rounded-sm bg-gray relative hover:bg-gray-600">
-                  <img class="absolute w-6 h-6 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" src="/assets/icons/profile/legs.svg" />
+                  <img class="w-6 h-6 center-element" src="/assets/icons/profile/legs.svg" />
                 </div>
               </div>
             </div>
diff --git a/src/components/gui/Minimap.vue b/src/components/gui/Minimap.vue
index 75b4ca2..05b7161 100644
--- a/src/components/gui/Minimap.vue
+++ b/src/components/gui/Minimap.vue
@@ -5,11 +5,11 @@
     </div>
     <div class="absolute -bottom-3 left-1/2 -translate-x-1/2 flex gap-1">
       <button class="w-6 h-6 relative p-0">
-        <img class="absolute w-3 h-3 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" src="/assets/icons/plus-icon.svg" />
+        <img class="w-3 h-3 center-element" src="/assets/icons/plus-icon.svg" />
         <img class="w-full h-full" src="/assets/ui-elements/button-ui-box-textured.svg" />
       </button>
       <button class="w-6 h-6 relative p-0">
-        <img class="absolute w-3 h-3 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" src="/assets/icons/minus-icon.svg" />
+        <img class="w-3 h-3 center-element" src="/assets/icons/minus-icon.svg" />
         <img class="w-full h-full" src="/assets/ui-elements/button-ui-box-textured.svg" />
       </button>
     </div>
diff --git a/src/components/gui/UserPanel.vue b/src/components/gui/UserPanel.vue
index 2a62aa1..03739d0 100644
--- a/src/components/gui/UserPanel.vue
+++ b/src/components/gui/UserPanel.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="absolute z-50 w-full h-dvh top-0 left-0 bg-black/60" v-show="false">
-    <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 max-w-[875px] max-h-[600px] h-full w-[80%] bg-gray border-solid border-2 border-gray-500 rounded-md z-50 flex flex-col backdrop-blur-sm shadow-lg">
+    <div class="center-element max-w-[875px] max-h-[600px] h-full w-[80%] bg-gray border-solid border-2 border-gray-500 rounded-md z-50 flex flex-col backdrop-blur-sm shadow-lg">
       <div class="p-2.5 flex max-sm:flex-wrap justify-between items-center gap-5 border-solid border-0 border-b border-gray-500">
         <h3 class="m-0 font-medium shrink-0">Game menu</h3>
         <div class="hidden sm:flex gap-1.5 flex-wrap">
diff --git a/src/components/gui/partials/Equipment.vue b/src/components/gui/partials/Equipment.vue
index 7205f3f..26d4e8b 100644
--- a/src/components/gui/partials/Equipment.vue
+++ b/src/components/gui/partials/Equipment.vue
@@ -14,47 +14,47 @@
           <div class="flex gap-3 justify-center">
             <!-- Helmet -->
             <div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md aspect-square h-11 w-11 relative hover:bg-gray-200">
-              <img src="/assets/icons/inventory/helmet.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
+              <img src="/assets/icons/inventory/helmet.svg" class="center-element w-11/12 opacity-20" />
             </div>
 
             <!-- Head charm -->
             <div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md aspect-square h-11 w-11 relative hover:bg-gray-200">
-              <img src="/assets/icons/inventory/head_charm.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
+              <img src="/assets/icons/inventory/head_charm.svg" class="center-element w-11/12 opacity-20" />
             </div>
           </div>
 
           <div class="flex gap-3 justify-center">
             <!-- Bracers -->
             <div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md w-11 h-[104px] relative hover:bg-gray-200">
-              <img src="/assets/icons/inventory/bracers.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
+              <img src="/assets/icons/inventory/bracers.svg" class="center-element w-11/12 opacity-20" />
             </div>
 
             <!-- Chestplate -->
             <div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md aspect-square w-[104px] h-[104px] relative hover:bg-gray-200">
-              <img src="/assets/icons/inventory/chestplate.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-10/12 opacity-20" />
+              <img src="/assets/icons/inventory/chestplate.svg" class="center-element w-10/12 opacity-20" />
             </div>
 
             <!-- Primary Weapon -->
             <div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md w-11 h-[104px] self-stretch justify-self-stretch relative hover:bg-gray-200">
-              <img src="/assets/icons/inventory/primary_weapon.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
+              <img src="/assets/icons/inventory/primary_weapon.svg" class="center-element w-11/12 opacity-20" />
             </div>
           </div>
 
           <div class="flex gap-3 justify-center">
             <!-- Legs -->
             <div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md w-11 h-[104px] self-stretch justify-self-stretch relative hover:bg-gray-200">
-              <img src="/assets/icons/inventory/legs.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
+              <img src="/assets/icons/inventory/legs.svg" class="center-element w-11/12 opacity-20" />
             </div>
 
             <div class="flex flex-col gap-3">
               <!-- Belt/pouch -->
               <div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md aspect-square h-11 w-11 self-stretch justify-self-stretch relative hover:bg-gray-200">
-                <img src="/assets/icons/inventory/pouch.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
+                <img src="/assets/icons/inventory/pouch.svg" class="center-element w-11/12 opacity-20" />
               </div>
 
               <!-- Boots -->
               <div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md aspect-square h-11 w-11 self-stretch justify-self-stretch relative hover:bg-gray-200">
-                <img src="/assets/icons/inventory/boots.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
+                <img src="/assets/icons/inventory/boots.svg" class="center-element w-11/12 opacity-20" />
               </div>
             </div>
           </div>
diff --git a/src/components/screens/Characters.vue b/src/components/screens/Characters.vue
index 760e349..818fedf 100644
--- a/src/components/screens/Characters.vue
+++ b/src/components/screens/Characters.vue
@@ -17,12 +17,12 @@
           <div class="lg:min-w-[285px] max-lg:min-h-[383px] lg:w-1/3 h-full bg-[url('/assets/ui-texture.png')] bg-no-repeat bg-cover bg-center border-0 max-lg:border-b lg:border-r border-solid border-gray-500 max-lg:rounded-t-md lg:rounded-l-md relative">
             <div class="absolute right-[calc(100%_+_16px)] -top-px flex gap-2 flex-col">
               <div v-for="character in characters" :key="character.id" class="character relative rounded default-border w-12 h-12 bg-[url('/assets/ui-texture.png')] after:absolute after:w-full after:h-px after:bg-gray-500" :class="{ active: selectedCharacterId === character.id }">
-                <img src="/assets/placeholders/head.png" class="w-9 h-9 object-contain absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2" alt="Player head" />
+                <img src="/assets/placeholders/head.png" class="w-9 h-9 object-contain center-element" alt="Player head" />
                 <input class="h-full w-full absolute m-0 z-10 hover:cursor-pointer focus-visible:outline-offset-0" type="radio" name="character" :value="character.id" v-model="selectedCharacterId" />
               </div>
               <div class="character relative rounded default-border w-12 h-12 bg-[url('/assets/ui-texture.png')]" :class="{ active: characters.length == 0 }" v-if="characters.length < 4">
                 <button class="p-0 h-full w-full flex flex-col justify-between focus-visible:outline-offset-0" @click="isCreateNewCharacterModalOpen = true">
-                  <img class="w-6 h-6 object-contain absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2" draggable="false" src="/assets/icons/plus-icon.svg" />
+                  <img class="w-6 h-6 object-contain center-element" draggable="false" src="/assets/icons/plus-icon.svg" />
                 </button>
               </div>
             </div>