How to Align Absolutely Positioned Element to Center

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 */
}

Center Align on a Absolutely Positioned Div

Your problem may be solved if you give your div a fixed width, as follows:

div#thing {
    position: absolute;
    top: 0px;
    z-index: 2;
    width:400px;
    margin-left:-200px;
    left:50%;
}

How to center absolute div horizontally using CSS?

You need to set left: 0 and right: 0.

This specifies how far to offset the margin edges from the sides of the window.

Like 'top', but specifies how far a box's right margin edge is offset to the [left/right] of the [right/left] edge of the box's containing block.

Source:
http://www.w3.org/TR/CSS2/visuren.html#position-props

Note: The element must have a width smaller than the window or else it will take up the entire width of the window.
You could use media queries to specify a minimum margin, and then transition to auto for larger screen sizes.

.container {
  left:0;
  right:0;

  margin-left: auto;
  margin-right: auto;

  position: absolute;
  width: 40%;

  outline: 1px solid black;
  background: white;
}

<div class="container">
  Donec ullamcorper nulla non metus auctor fringilla.
  Maecenas faucibus mollis interdum.
  Sed posuere consectetur est at lobortis.
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
  Sed posuere consectetur est at lobortis.
</div>

Centering absolutely positioned element in CSS Grid

It appears that Chrome has deviated from spec guidance on this issue.

The justify-self and align-self properties should work on an absolutely-positioned child element of a grid container.

9.2. With a Grid Container as
Parent

An absolutely-positioned child of a grid container is out-of-flow and
not a grid item, and so does not affect the placement of other items
or the sizing of the grid.

The static position of an absolutely-positioned child of a grid
container is determined as if it were the sole grid item in a grid
area whose edges coincide with the padding edges of the grid
container.

Note that this position is affected by the values of justify-self
and align-self on the child.

So, Firefox seems to have this right.

For other centering options see this post:

Centering in CSS Grid

how to center absolutely positioned [h4] element?

Try with a left: 50%; and transform: translate(-50%, -50%);

https://stackoverflow.com/a/25776315/11401246 for a good explanation on what exactly it is doing.

Can not align absolute div in center

left: auto; right: auto won't work like margin: 0 auto for centering the div, but you have a fixed width and you can just set the left property to half of what's left e.g. left: 5%