# Absolute center

**URL:** <https://forum.bootstrapstudio.io/t/absolute-center/9636>\
**Category:** Bug Reports\
**Created:** [November 19, 2022, 8:42am UTC](https://forum.bootstrapstudio.io/t/absolute-center/9636 "2022-11-19T08:42:50Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![DGDufi](https://forum.bootstrapstudio.io/letter_avatar_proxy/v4/letter/d/8e7dd6/32.png) [@DGDufi](https://forum.bootstrapstudio.io/u/DGDufi)\
**Post date:** [November 19, 2022, 8:42am UTC](https://forum.bootstrapstudio.io/t/absolute-center/9636/1 "2022-11-19T08:42:50Z")

</div>

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

[![](https://forum.bootstrapstudio.io/uploads/default/original/2X/a/a6a82b9c4c9680a6eb644373f2846ac1d9f573df.jpeg "abscenter") ](https://www.youtube.com/watch?v=U6_Z4-zK07U)

---

<div class="post-metadata">

**Author:** ![DGDufi](https://forum.bootstrapstudio.io/letter_avatar_proxy/v4/letter/d/8e7dd6/32.png) [@DGDufi](https://forum.bootstrapstudio.io/u/DGDufi)\
**Post date:** [November 20, 2022, 7:34am UTC](https://forum.bootstrapstudio.io/t/absolute-center/9636/3 "2022-11-20T07:34:42Z")

</div>

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%);

---

<div class="post-metadata">

**Author:** ![richards](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/richards/32/3163_2.png) [@richards](https://forum.bootstrapstudio.io/u/richards)\
**Post date:** [November 21, 2022, 7:28pm UTC](https://forum.bootstrapstudio.io/t/absolute-center/9636/4 "2022-11-21T19:28:37Z")

</div>

try adding the built in position classes to your element that you want centering:

```auto
position-absolute top-50 start-50 translate-middle

```

You can find more here:

> **[Position](https://getbootstrap.com/docs/5.2/utilities/position/)**
>
> Use these shorthand utilities for quickly configuring the position of an element.