What this Bootstrap Utility API class does
Sets the transform property of an element.
Translate middle applies the transformations translateX(-50%) and translateY(-50%) to the element which, in combination with the edge positioning utilities, allows you to absolute center an element.
Example usage & available classes
<div class="position-relative">
<div class="position-absolute top-0 start-0 translate-middle"></div>
</div>
Example override
In the example below, we are making the utility responsive, which means in addition to the class ".translate-middle", you can also use it per breakpoint: ".translate-middle-lg"
"translate-middle": map-merge(
map-get($utilities, "translate-middle"),
(
responsive: true
)
)