When I specify the center alignment of the div element and click on another element, the positioned value disappears from the code of the centered div.
This is the only way it works: transform: translateX(-50%) translateY(-50%);
It does not work in a combined form
I know 
I found this error while creating the custom card.
I wanted to add an icon and it always bounced back.
There was no problem in Vsc.
The original card is much more complicated.
This is just a demonstration of the bug.
Original card value: transform: translate(-50%,-98%);
try adding the built in position classes to your element that you want centering:
position-absolute top-50 start-50 translate-middle
You can find more here: