How to Center a "Position: Absolute" Element

How can I center an absolutely positioned element in a div?

<body>  <div style="position: absolute; left: 50%;">    <div style="position: relative; left: -50%; border: dotted red 1px;">      I am some centered shrink-to-fit content! <br />      tum te tum    </div>  </div></body>

Center absolute positioned div

If i understood your question then it will work as below.

You can do it in three ways.

No1 - Using position. Apply width 100% to button parent div and apply the button style as bellow.

.buy-btn{
    display: inline-block;       /* Display inline block */
    text-align: center;          /* For button text center */
    position: absolute;          /* Position absolute */
    left: 50%;                   /* Move 50% from left */
    bottom: 10px;                /* Move 10px from bottom */
    transform: translateX(-50%); /* Move button Center position  */
}

No2 - Using parent div, apply width 100% to your parent div and remove the postion absolute from button.

.parentDiv {
    width: 100%;            /* for full width */
    text-align: center;     /* for child element center */
 }

.buy-btn{
    display: inline-block;       /* Display inline block */
    text-align: center;          /* For button text center */
}

No3 - Using margin, apply width 100% to your parent div and remove the postion absolute from button.

.parentDiv {
    width: 100%;            /* for full width */
 }

.buy-btn{
    display: inline-block;       /* Display inline block */
    text-align: center;          /* For button text center */        
    margin: 0 auto;              /* For button center */
}

How to center horizontally an absolute button in a div?

Try to transform: translateX(-50%); your button

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

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>

How to move div position absolute to center using css?

See comments in code. Every change has comment. Everything else is as you had it. (I just don't like inline styles, they make it so hard to read)

#main {    position: relative;    display: inline-block;    text-align: center;    border: 1px solid;}
#test {    position: absolute;    display: block;    top: 50%; /* changed from 0 to 50% */    left: 50%; /* changed from 0 to 50% */    width: 70%;    height: 100%;    color: #FFF;    background: rgba(0, 0, 0, .6);
    transform: translate(-50%, -50%);  /* added this line */}
#main img {    width: 70%;    height: auto;    max-width: 100%;    /* border: none; this is not needed */    vertical-align: middle; /* add this line */}

<div id="main">  <img src="https://i.ytimg.com/vi/SfLV8hD7zX4/maxresdefault.jpg">  <div id="test"></div></div>

How to center a absolute element in another absolute element, that could be used for rotation and animation purposes

I think this is what you wanted.

https://jsfiddle.net/5zun4tqr/

I've used the example from there: Center element inside div (circle)

It will always remain in the center like that, size shouldn't cause any problems when used with that flexbox method.

body {  background: #0a0a0a;}

.some-container {  position: relative;  display: inline-block;}
.some-container2 {  position: relative;  display: inline-block;  margin-left: 80px;}
.some-container3 {  position: relative;  top: 30px;  left: 30px;}
.box1 {  width: 50px;  height: 50px;  background: red;  position: absolute;}
.box2-container {  display: flex;  position: relative;  height: 50px;  width: 50px;  justify-content: center;  align-items: center;  border: darkgreen solid 1px;  box-sizing: border-box; /* Because of the border */  }
@keyframes box2-rotation {  0% {transform: rotate(0deg);}  100% {transform: rotate(360deg);}}
.box2 {  width: 40px;  height: 40px;  border: 2px solid blue;  position: absolute;  border-radius: 50%;   border-color: blue blue blue transparent;  border-width: 2px;  animation: box2-rotation 3s linear infinite;}

.replace1 {  width: 30px;  height: 30px;}
.replace2 {  width: 30px;  height: 30px;}
.replace3 {  width: 60px;  height: 60px;}
.box3 {  width: 80px;  height: 80px;  border: 2px solid;  position: absolute;  border-radius: 50%;   border-color: green green green transparent;  border-width: 2px;  animation: box2-rotation 4s linear infinite;}
.box4 {  width: 120px;  height: 120px;  position: absolute;  animation: box4-rotation 6s linear infinite;}
@keyframes box4-rotation {  0% {transform: rotate(0deg);}  100% {transform: rotate(360deg);}}
.box4-circle {  stroke-dasharray: 52.275;  stroke-width: 2px;  animation: box4-rotateion 6s linear infinite;  animation-fill-mode: both;  transform-origin: center;}

<div class=some-container3>  <div class=some-container>    <div class=box1>    </div>    <div class=box2-container>      <div class=box2>      </div>    </div>  </div>
  <div class=some-container2>    <div class="box1 replace1">    </div>    <div class="box2-container replace2">      <div class="box2 replace3"></div>      <div class="box3"></div>        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 107 107" class="box4">          <circle class="box4-circle" cy=50% cx=50% r=50 stroke=white fill=none></circle>        </svg>      </div>    </div>  </div></div>