Centering a position absolute element using translateX(-50%) doesn't center div

Question

I have div a container with two elements inside, el and an absolute positioned element pp . el shares the same width and height as the container and their width can be dynamically changed .

pp should be centered to el and the container . I have a red marker in the middle of the pp div to mark it's center.

With a 30px width to the container and el , to center pp I used, translateX(-50%) . From my understanding this should center pp to el . But actual result is not that. -50% moves the div a little further to the left. When tweaking -43% centers the red marker. But this -43% is not applicable to another el div with a different width.

How do I always center the pp container using translateX to another div of any size.

 .container { width: 30px; margin: 0 auto; } .el { width: 30px; height: 30px; background-color: pink; border-radius: 100%; } .pp { position: absolute; max-width: 300px; background-color: yellow; } .pp1 { transform: translateX(-50%); } .pp2 { transform: translateX(-43%); } 

 Not centered when translateX is -50% <br /> <br /> <div class="container"> <div class="el"> elem </div> <div class="pp pp1"> <div style="width:10px; height: 10px; margin: 0 auto; background-color: red;"></div> popoverasdasd asjdjasd sdfsdfsdfsdf </div> </div> <br /> <br /> <br /> <br /> Expected result comes when translateX is -43% <br /> <br /> <div class="container"> <div class="el"> elem </div> <div class="pp pp2"> <div style="width:10px; height: 10px; margin: 0 auto; background-color: red;"></div> popoverasdasd asjdjasd sdfsdfsdfsdf </div> </div> 

Fiddle: https://jsfiddle.net/v6o5z8a0/

Answer 1

So I changed the code a little to see what it was doing.

The comments are correct, you must do a left: 50% and a transform: translateX(-50%); .

The left:50% will move the left side of your inner element to the middle of the parent element. And the transform: translateX(-50%); will move the inner element back by 50% of its width. This will center the object in the parent.

Part of the problem in your example was:

• The lack of a position: relative on the parent container.
• Setting the parent container to 30px. For this to work well the parent should take 100% width.
• Forgetting the left: 50% in the .el and .pp rules.

 .container { height: 80px; outline: 1px dashed red; position: relative; } .el { background-color: pink; border-radius: 100%; height: 30px; left: 50%; outline: 1px dashed blue; position: absolute; transform: translateX(-50%); width: 30px; } .pp { bottom: 0; position: absolute; left: 50%; max-width: 300px; background-color: yellow; } .pp1 { transform: translateX(-50%); } .pp2 { transform: translateX(-43%); } 

 Not centered when translateX is -50% <br /> <br /> <div class="container"> <div class="el"> elem </div> <div class="pp pp1"> <div style="width:10px; height: 10px; margin: 0 auto; background-color: red;"></div> popoverasdasd asjdjasd sdfsdfsdfsdf </div> </div> <br /> <br /> <br /> <br /> Expected result comes when translateX is -43% <br /> <br /> <div class="container"> <div class="el"> elem </div> <div class="pp pp2"> <div style="width:10px; height: 10px; margin: 0 auto; background-color: red;"></div> popoverasdasd asjdjasd sdfsdfsdfsdf </div> </div>