如何在div底部水平居中绝对定位的按钮？现有方案无效

嘿，我来帮你搞定这个按钮居中的问题！你遇到的问题主要有两个核心原因：

• 你的父容器.mc-item没有设置position: relative，导致绝对定位的按钮是相对于整个文档（或者上层最近的已定位元素）来定位，而不是你想要的这个div容器。
• 只设置left: 50%只能让按钮的左边缘对齐容器的中线，还需要调整按钮自身的位置，才能让按钮整体居中。

修复后的完整代码 #

<div class="mc-item">
  <p>这里是容器内的文本内容</p>
  <a href="#" class="btn btn-primary">底部居中按钮</a>
</div>

<style>
.mc-item {
  background: #F0F0F0;
  border: 1px solid #DDD;
  height: 140px;
  padding: 20px;
  /* 关键：添加相对定位，让内部绝对定位元素以此为基准 */
  position: relative;
}
.mc-item a {
  position: absolute;
  bottom: -19px;
  left: 50%;
  /* 关键：向左偏移自身宽度的50%，实现整体居中 */
  transform: translateX(-50%);
}
.mc-item p {
  text-align: center;
}
</style>

关键修改说明 #

1. 给.mc-item添加position: relative：这是绝对定位元素的定位基准，没有它的话，按钮会跳出当前容器，相对于body定位，自然没法在div底部居中。
2. 添加transform: translateX(-50%)：left: 50%让按钮的左边缘到容器中线，而translateX(-50%)会把按钮往左移动自身宽度的一半，这样按钮的中心点就和容器中线对齐了，完美实现居中效果。

这样修改后，按钮就能稳稳地在.mc-item的底部居中显示啦！

内容的提问来源于stack exchange，提问作者Haytam