How to center a button that is positioned relatively

I have a button that is positioned relatively to it's parent. The problem is that when that parent width changes my buttons are no longer in the center and i can't use margin: 0 auto

I'll show some images to demonstrate what i mean:

see how the meal and burger are not centered, btw they are centers on a screen width of 400px

.card-container {
  width: 45%;
  margin-bottom: 1rem;
  background: #fff;
  border: 1px solid #707070;
  border-radius: 20px;
}

.card-container * {
  margin: 0;
  padding: 0 8px;
}


/*
-----
top-part
-----
*/

.top-part {
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
  padding: 2rem 0;
  border-bottom: 1px solid #808080;
}


/*
----
meal && burger
----
*/

.middle-part {
  text-align: center;
  position: absolute;
  -webkit-box-align: center;
  -webkit-box-pack: center;
  display: -webkit-box;
}

.meal-burger-btn {
  position: relative;
  background: #fff;
  border: 1px solid #808080;
  border-radius: 50%;
  width: 3.5rem;
  padding: 1.3em 0;
  top: -28px;
  left: 15%;
  margin: auto;
}

<div class="card-container">
  <div class="top-part">
    <p>crazy burger</p>
  </div>

  <div class="middle-part">
    <button class="meal-burger-btn">meal</button>
    <button class="meal-burger-btn">burger</button>
  </div>

  <div class="bottom-part">
    <p class="price price-active">2.0 bd</p>
    <p class="price">1.7 bd</p>

    <div class="card-image-container">
      <img src="images/IMG_0406_LI.jpg" alt="">
    </div>

    <p class="ingredients">ingredients:</p>
    <p class="ingredients-2">Beef patty - Toasted burger buns - Bacon - Onion rings - Cheddar cheese - Crazy Sauce</p>
  </div>
</div>

I tried w3shcool solution and it didn't work, I've also tried other stack overflow question also didn't work