Extra position utilities (#31280)

* Extra position utilities

Given that there are utilities for the *position* property, it seems logic to have utilities for the *top*, *left*, *bottom* and *right* propertires.

* Update extra position utilities

* add default position values map

* tweak examples

* add real life examples

* fix double colon

Co-authored-by: XhmikosR <xhmikosr@gmail.com>

scss/_utilities.scss

@@ -39,6 +39,29 @@ $utilities: map-merge(
       property: position,
       values: static relative absolute fixed sticky
     ),
+    "top": (
+      property: top,
+      values: $position-values
+    ),
+    "bottom": (
+      property: bottom,
+      values: $position-values
+    ),
+    "left": (
+      property: left,
+      values: $position-values
+    ),
+    "right": (
+      property: right,
+      values: $position-values
+    ),
+    "translate-middle": (
+      property: transform,
+      class: translate-middle,
+      values: (
+        null: (translateX(-50%) translateY(-50%))
+      )
+    ),
     "border": (
       property: border,
       values: (