如何让信息提示栏在缩放与滚动时始终保持水平居中

使用 position: sticky 结合 left: 0; right: 0; text-align: center，可使元素在父容器内随视口缩放动态居中，同时在横向滚动时固定于可视区域中央，完美兼顾响应式缩放与滚动同步需求。

使用 `position: sticky` 结合 `left: 0; right: 0; text-align: center`，可使元素在父容器内随视口缩放动态居中，同时在横向滚动时固定于可视区域中央，完美兼顾响应式缩放与滚动同步需求。

要实现一个始终水平居中的信息栏（如“No Results Found”），且该栏必须：

1. 始终位于表格容器的可视区域内（不可被滚动条遮挡）；
2. 在用户使用 Ctrl + 鼠标滚轮或 Ctrl + +/- 缩放页面时保持居中；
3. 在横向滚动表格内容时仍稳定居中于当前可视窗口（而非随表格内容位移）；
4. 适配任意宽度的表格（无需硬编码 left: 150px 等固定偏移）；

position: sticky 是最简洁、语义正确且原生支持的解决方案。

✅ 正确实现方式

关键在于将 .infoDiv 设置为 sticky，并利用 left: 0; right: 0 触发其“居中定位行为”，再配合 text-align: center 实现文本级居中：

.tableWrapper {position: relative; /* 为 sticky 提供最近的定位上下文（非必需但推荐） */overflow-x: auto;width: 400px;height: 100px;}.infoDiv2 {position: sticky;left: 0;right: 0;text-align: center;padding: 8px;background: #f8f9fa;border-top: 1px solid #dee2e6;font-size: 14px;color: #6c757d;}

? 原理说明：

position: sticky 元素在文档流中正常渲染，但当其滚动到指定阈值（由 top/left/right/bottom 定义）时，会“粘住”在最近的滚动祖先边界内。此处设置 left: 0; right: 0，意味着它始终尝试填满父容器的可用水平空间——结合 text-align: center，文字自然居中；而由于 sticky 的定位基准是视口（viewport）的可视区域，因此：

1. 缩放时：浏览器重绘布局，left: 0; right: 0 自动适应缩放后的新宽度，居中不变；
2. 滚动时：元素脱离文档流跟随视口，不会随表格内容移动，始终保持在当前滚动视图的水平中心。

⚠️ 注意事项

1. ✅ 父容器需有明确宽度（如示例中的 width: 400px），否则 sticky 的 left/right 行为可能异常；若宽度动态（如 max-width: 100%），建议用 width: fit-content 或 inline-block 包裹表格以确保 .tableWrapper 宽度由内容撑开。
2. ✅ .infoDiv2 必须紧跟 <table> 后置于同一 .tableWrapper 内，不可脱离该滚动上下文。
3. ❌ 不要设置 top 或 bottom（除非需要垂直吸附），否则可能干扰水平居中逻辑。
4. ? 兼容性：现代浏览器（Chrome 56+、Firefox 59+、Safari 13.1+、Edge 16+）均支持；旧版 Safari 需加 -webkit-sticky 前缀（已基本可忽略）。

? 进阶优化（多表格复用）

若页面存在多个不同宽度的表格，可封装为 CSS 类，避免重复定义：

.sticky-center-bar {position: sticky;left: 0;right: 0;text-align: center;padding: 6px 12px;font-size: 0.875rem;background: #f1f3f5;color: #495057;}

并在 HTML 中统一应用：

<div class="tableWrapper"><table>...</table><div class="sticky-center-bar">No Results Found</div></div>

此方案无需 JavaScript、无重排开销、完全声明式，是解决“缩放+滚动双重居中”问题的专业级 CSS 解法。