Center an element with position Absolute

Question

I’m trying to center a button on my card.

I’d like to get that result:

need to be with position Absolute because the other cards sometimes have larger description and the "See details" button gets different distances.

Currently I tried:

.btn-comprar{
    position: absolute;
    bottom: 0;
    left: 0;
}

Currently the button with these properties has the following result:

My html:

  <div class="row mt-2">
    <div *ngFor="let produto of produtos" [class.col-md-12]="visualizacao == 'lista'" class="col-sm-12 mt-2 col-md-4 produto-lista pb-4">

      <div [class.colLista]="visualizacao == 'lista'" class="thumb-wrapper">
        <span *ngIf="produto.desconto != null" class="desconto"><i class="fas fa-angle-down"></i>
          {{ produto.desconto }} %</span>
        <div class="img-box">
          <a [routerLink]="['/produtos/', produto.id, produto.slug]">
            <img src="{{ produto.foto_prin_1 }}" class="img-responsive img-fluid" alt="">
          </a>
        </div>
        <div [class.thumb-lista]="visualizacao == 'lista'" class="thumb-content">

          <h4>{{ produto.nome }}</h4>

          <app-media-avaliacao-produto [numero_avaliacoes]="produto.numero_avaliacoes" [avaliacao]="produto.aval"></app-media-avaliacao-produto>


          <p class="item-price"><span *ngIf="produto.desconto != null"
              style="text-decoration: line-through">{{ produto.preco_anterior | currency:'BRL' }}</span>
            <b>{{ produto.preco | currency:'BRL' }}</b></p>
          <a [routerLink]="['/produtos/', produto.id, produto.slug]" class="btn btn-comprar">ver
            detalhes
          </a>

        </div>
      </div>
    </div>
  </div>

CSS:

.thumb-wrapper{
    padding: 35px;
    background: #fff;
    border-radius: 6px;
    text-align: center;
    position: relative;
    box-shadow: 0 2px 3px rgba(0,0,0,0.2);
    border: 1px solid #caccca;
    height: 100%;
}

I use the library material design bootstrap

Answer 1

Dude, I tried to simulate here, and apparently he’s lined up, so there’s something else in his code that’s getting in the way... But see in the example below that to center an absolute element you have to put margin:auto and left:0 and right:0 so it gets in the middle. And the bottom you adjust with as many px you want no secret...

.box {
    position: relative;
    width: 100px;
    height: 100px;
    border: 1px solid #000;
}
.box .btn {
    position: absolute;
    width: 30px;
    margin: auto;
    bottom: 10px;
    left: 0;
    right: 0;
    border: 1px solid #000;
}

<div class="box">
    <div class="btn">btn</div>
</div>

Answer 2

You can use percentage combined with Calc in your css to calculate the ratio. ex:

.box {
    position: relative;
    width: 100px;
    height: 100px;
    border: 1px solid #000;
}
.box .btn {
    position: absolute;
    width: 30px;
    bottom: 10px;
    left: calc(50% - 15px);    
    border: 1px solid #000;
}

<div class="box">
    <div class="btn">btn</div>
</div>