如何在div中水平居中绝对按钮？ [复制]答案

【问题标题】：How to center horizontally an absolute button in a div? [duplicate]如何在div中水平居中绝对按钮？ [复制]
【发布时间】：2023-03-03 07:16:21
【问题描述】：

我正在尝试将绝对按钮置于 div 中（在底部），但它似乎不起作用..这是我现在正在做的事情：

.mc-item {
  background: #F0F0F0;
  border: 1px solid #DDD;
  height: 140px;
  padding: 20px;
}

.mc-item a {
  position: absolute;
  bottom: -19px;
  left: 50%;
}

.mc-item p {
  text-align: center;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="col-md-4 col-sm-12">
  <div class="mc-item">
    <p>Changez votre adresse email ou votre mot de passe.</p>
    <a asp-controller="MyAccount" asp-action="Settings" class="btn btn-primary">Paramètres</a>
  </div>
</div>

这给出了以下结果：

我想要的是中间居中的按钮。 left: 50% 是否考虑了整个 .col div？我尝试将button 包裹在div 中，然后div 的宽度变为380，这与.col div 相同（不是div 和<p>）。

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

Left:50% 将创建元素，从容器的中心位置开始。所以元素仍然不在中心，但Transform: translate(-50%,0) 会将元素移动到其宽度的 50% 的左侧。所以现在元素的中心与其容器的水平中心相遇。

.mc-item {

  background: #F0F0F0;
  border: 1px solid #DDD;
  height: 140px;
  padding: 20px;
}

.mc-item a {
  position: absolute;
  bottom: -19px;
  left: 50%;
  transform: translate(-50%,0)
}

.mc-item p {
  text-align: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-4 col-sm-12">
  <div class="mc-item">
    <p>Changez votre adresse email ou votre mot de passe.</p>
    <a asp-controller="MyAccount" asp-action="Settings" class="btn btn-primary">Paramètres</a>
  </div>
</div>

【讨论】：

【解决方案2】：

.mc-item {
    background: #F0F0F0;
    border: 1px solid #DDD;
    height: 140px;
    padding: 20px;
    position: relative;
}

.mc-item a {
    position: absolute;
    bottom: -19px;
    left: 50%;
    transform: translateX(-50%);
}

.mc-item p {
    text-align: center;
}

【讨论】：

【解决方案3】：

尝试transform: translateX(-50%);你的按钮

【讨论】：

而不是什么？我应该删除 left: 50% 吗？我替换了它，它从 div 中消失了（在左侧）。
不，只需将其添加到您的按钮
完美运行，您能解释一下这是如何解决问题的吗？
left 属性的目标是按钮的左侧，翻译采用按钮的宽度，并将您的按钮-50% 的宽度向右翻译，所以 50%左边的按钮宽度