From 5b0dcf8ffe6ae121722c9db571294e715b7ec52a Mon Sep 17 00:00:00 2001
From: Martijn Cuppens <martijn.cuppens@gmail.com>
Date: Sun, 29 Nov 2020 15:58:20 +0100
Subject: [PATCH] Add `.translate-middle-x` and `.translate-middle-y` utilities

---
 scss/_utilities.scss                        |  4 +++-
 site/content/docs/5.0/utilities/position.md | 16 ++++++++++++++++
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index dacd8b2891..89bf16847b 100644
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -65,7 +65,9 @@ $utilities: map-merge(
       property: transform,
       class: translate-middle,
       values: (
-        null: (translateX(-50%) translateY(-50%))
+        null: translate(-50%, -50%),
+        x: translateX(-50%),
+        y: translateY(-50%),
       )
     ),
     "border": (
diff --git a/site/content/docs/5.0/utilities/position.md b/site/content/docs/5.0/utilities/position.md
index 3e84ce557f..63ce589b3d 100644
--- a/site/content/docs/5.0/utilities/position.md
+++ b/site/content/docs/5.0/utilities/position.md
@@ -68,6 +68,22 @@ This class applies the transformations `translateX(-50%)` and `translateY(-50%)`
 </div>
 {{< /example >}}
 
+By adding `.translate-middle-x` or `.translate-middle-y` classes, elements can be positioned only in horizontal or vertical direction.
+
+{{< example class="bd-example-position-utils" >}}
+<div class="position-relative">
+  <div class="position-absolute top-0 start-0"></div>
+  <div class="position-absolute top-0 start-50 translate-middle-x"></div>
+  <div class="position-absolute top-0 end-0"></div>
+  <div class="position-absolute top-50 start-0 translate-middle-y"></div>
+  <div class="position-absolute top-50 start-50 translate-middle"></div>
+  <div class="position-absolute top-50 end-0 translate-middle-y"></div>
+  <div class="position-absolute bottom-0 start-0"></div>
+  <div class="position-absolute bottom-0 start-50 translate-middle-x"></div>
+  <div class="position-absolute bottom-0 end-0"></div>
+</div>
+{{< /example >}}
+
 ## Examples
 
 Here are some real life examples of these classes: