How to Center an Absolutely Positioned Element in a Div

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

Centering position: absolute div in relative container in desktop and mobile

it is always safe to use transform to make the element center, see the following code

 .child {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: red;
  left: 50%;
  top: 50%;
  border-radius: 100%;
  transform: translate(-50%,-50%);
}

when you use left and right positioning, it is always pushing div from the sides not from the center, so in order to make exactly at center transform is the easy fix.

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%

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>

Absolute Positioning to parent div

position absolute:

It will position itself according to the closest positioned ancestor.

In your case, you don't have any positioned ancestor, so your absolute elements will position to the viewport.

You have to give your ancestors a position different from static. I suggest using relative in this case since it respects the flow of the page.

You have to add this in your CSS:

.div_1{
  height:70vh;
  border:1px solid blue;
  margin:20px;
  position: relative; // now this element is considered a positioned element.
}
.sub_div{
  height:40vh;
  border:1px solid green;
  margin:20px;
  position: relative;
}

You can read more about how position affects your elements at: https://cssreference.io/positioning/