如何使相对定位的按钮居中答案

【问题标题】：How to center a button that is positioned relatively如何使相对定位的按钮居中
【发布时间】：2021-11-16 15:49:32
【问题描述】：

我有一个相对于其父级定位的按钮。问题是当父宽度改变时，我的按钮不再在中心，我不能使用margin: 0 auto

我将展示一些图片来说明我的意思：

看看餐点和汉堡如何不居中，顺便说一句，它们在 400 像素的屏幕宽度上居中

.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;
}

img {
  width: 12em;
  height: 10em;
}

.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="https://www.freepngimg.com/thumb/burger/4-2-burger-png-file.png" 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>

我尝试了 w3school 解决方案，但没有成功，我也尝试过其他堆栈溢出问题也没有成功

【问题讨论】：

标签： html css web frontend web-frontend

【解决方案1】：

.middle-part你能把这里的position:absolute特征去掉试试看吗？

编辑..

并且 .meal-burger-btn -> left:%15 移除特征

【讨论】：

这个回答帖子可以是评论，所以请用代码sn-p演示一下

【解决方案2】：

我建议避免绝对定位，并在中间部分使用负上边距。

.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;
  -webkit-box-align: center;
  -webkit-box-pack: center;
  display: -webkit-box;
  margin-top: -1.75rem;
  margin-left: auto;
  margin-right: auto;
}

.meal-burger-btn {
  background: #fff;
  border: 1px solid #808080;
  border-radius: 50%;
  width: 3.5rem;
  height: 3.5rem;
  padding: 0;
  line-height: 3.2rem
}

<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>

【讨论】：

【解决方案3】：

好吧，如果你必须使用绝对位置，你需要给它宽度 100%，它会根据它的父级使用它拥有的所有空间，现在绝对定位的 div 在 auto 上有宽度，宽度只会扩大根据里面的内容。不需要将 parent 本身定位在 center 中，而是将其中的内容集中起来。

middle-part{
  text-align: center;
  position: absolute;
  -webkit-box-align: center;
  -webkit-box-pack: center;
  display: -webkit-box;
  width:100%;
  width:-webkit-fill-available;
}

请记住，将中心添加到 div 本身并不是中心，而是将影响应用于其中的内容或子项。另外，我建议您研究一下 flex-box ，当您想轻松地做遵循一致模式的 CSS 时，它非常有帮助。

也不要使用 margins/top/left/padding 来使东西居中，如果分辨率发生变化，它总是会爆炸，除非你对它们使用 Auto。

【讨论】：