Center absolute positioned div [duplicate]

问题

This question already has answers here:

How to center a “position: absolute” element (25 answers)

How to center absolutely positioned element in div? (33 answers)

How to center absolute div horizontally using CSS? (8 answers)

Closed 2 years ago.

I have a div, in it there is a button:

I let the button position to absolute, and its style code:

  .buy-btn {
    text-align: center;
    position: absolute;
    bottom: 10px;

  }

How can I align it to center? I tried add margin: 0 auto;, but it not work.

回答1:

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

回答2:

/* Replace below css  and add position relative to its parent class*/

.buy-btn {
       text-align: center;
       position: absolute;
       bottom: 10px;
       left: 50%;
       display: inline-block;
       transform: translateX(-50%);
    }

回答3:

you may add these.

.buy-btn {
    /* ... */
    left:50%;
    transform: translateX(-50%);
}

回答4:

Here is a solution using flexbox, hopefully you learn something from it.

.container{
  display: flex;
  height: 200px;
  width: 500px;
  background-color: powderblue;
  justify-content: center;
}


button{
  height: 20px;
  align-self: center;
}

<div class="container">

<button>click me</button>

</div>

回答5:

You need to use margin-left: auto; margin-right: auto; with position:absolute like given below:-

.btn-box{ position: relative; }
.btn-center {
    position: absolute;
    top: 10px;
    left: 0px;
    right: 0px;
    margin-left: auto;
    margin-right: auto;
    width:100px;
  }

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<a href="#" class="btn btn-warning btn-center">Click here</a>

回答6:

if you want to use position , in this case you need to give the width to btn and then it works

.buy-btn {
    text-align: center;
    position: absolute;
    width:100px;
    left:50%;
    margin-left:-50px; /* please change it according to the width; always  the half of width */
    bottom: 10px;
}

回答7:

Check this answer i think this will help you. https://codepen.io/anon/pen/ZoYvME

.buy-btn {
    /* ... */
    position:absolute;
    margin-left:50%;
    margin-right:50%;
    transform: translateX(-50%);
    bottom: 10px;
  
}

<input type="button" class="buy-btn" value="hai">

来源：https://stackoverflow.com/questions/49568064/center-absolute-positioned-div