如何在div中水平居中一个绝对按钮？

Question

我试图将div中的绝对按钮居中（在底部），但它似乎无法正常工作..这就是我现在正在做的事情：

＆＃13;

＆＃13;

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

＆＃13;

left: 50%

＆＃13;

＆＃13;

＆＃13;

这给出了以下结果：

我想要的是位于中间的按钮。 .col div是否考虑了整个button？我尝试将div包裹在div中，.col div的宽度变为380，这与div（而不是<p>相同{{1}}）。

Answer 1

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

Answer 2

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>

Answer 3

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