如何实现文本水平居中且固定于页面底部，带背景与换行控制？

我来帮你解决这个问题！你遇到的核心问题是绝对定位元素脱离文档流后，常规的居中方法不再生效，咱们只需要调整几个CSS属性就能完美实现所有需求：固定在页面底部、水平居中、文本超过屏幕30%宽度自动换行，同时保留背景样式。

完整代码示例 #

HTML（无需修改）

<div class="div-1"> 
  <div class="div-2"> Hey this is an amazing way to do this </div> 
</div>

修改后的CSS

.div-1 {
  height: 100vh;
  position: relative; /* 关键：让内部绝对定位元素相对于这个容器定位 */
}

.div-2 {
  position: absolute; /* 固定在容器底部 */
  bottom: 10px;
  left: 50%; /* 将元素左边缘移到容器水平中点 */
  transform: translateX(-50%); /* 向左平移自身宽度的50%，实现完美居中 */
  max-width: 30%; /* 限制最大宽度为容器（屏幕）的30%，超过自动换行 */
  background-color: black;
  color: white;
  font-size: 20px;
  padding: 8px 16px; /* 可选：添加内边距，让文本不贴背景边缘更美观 */
  text-align: center; /* 可选：让文本内部也水平居中 */
}

关键属性解释 #

• position: relative 给父容器设置相对定位，确保子元素的绝对定位是相对于父容器（而不是整个文档）来计算位置的。
• left: 50% + transform: translateX(-50%) 这是绝对定位元素实现水平居中的经典技巧：先把元素左边缘移到中点，再向左平移自身宽度的一半，无论元素内容宽度多少，都能精准居中。
• max-width: 30% 限制元素的最大宽度为父容器的30%，当文本内容超过这个宽度时，会自动换行，完全符合你的需求。

可选：固定在视口底部（不随页面滚动） #

如果你希望文本固定在浏览器视口底部，不随页面滚动移动，可以把.div-2的position改成fixed，同时不需要给.div-1设置position: relative：

.div-1 {
  height: 100vh;
}

.div-2 {
  position: fixed; /* 固定在视口底部 */
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 30%;
  background-color: black;
  color: white;
  font-size: 20px;
  padding: 8px 16px;
  text-align: center;
}

这样就能完美实现你想要的所有效果啦！

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