使用 position: sticky 结合 left: 0; right: 0; text-align: center，可使元素在父容器内随视口缩放动态居中，同时在横向滚动时固定于可视区域中央，完美兼顾响应式缩放与滚动同步需求。
使用 `position: sticky` 结合 `left: 0; right: 0; text-align: center`，可使元素在父容器内随视口缩放动态居中，同时在横向滚动时固定于可视区域中央，完美兼顾响应式缩放与滚动同步需求。
要实现一个始终水平居中的信息栏（如“No Results Found”），且该栏必须：
- 始终位于表格容器的可视区域内（不可被滚动条遮挡）；
- 在用户使用 Ctrl + 鼠标滚轮或 Ctrl + +/- 缩放页面时保持居中；
- 在横向滚动表格内容时仍稳定居中于当前可视窗口（而非随表格内容位移）；
- 适配任意宽度的表格（无需硬编码
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）的可视区域，因此：
- 缩放时：浏览器重绘布局，
left: 0; right: 0自动适应缩放后的新宽度，居中不变；- 滚动时：元素脱离文档流跟随视口，不会随表格内容移动，始终保持在当前滚动视图的水平中心。
⚠️ 注意事项
- ✅ 父容器需有明确宽度（如示例中的
width: 400px），否则sticky的left/right行为可能异常；若宽度动态（如max-width: 100%），建议用width: fit-content或inline-block包裹表格以确保.tableWrapper宽度由内容撑开。 - ✅
.infoDiv2必须紧跟<table> 后置于同一 <code>.tableWrapper内，不可脱离该滚动上下文。- ❌ 不要设置
top或bottom（除非需要垂直吸附），否则可能干扰水平居中逻辑。- ? 兼容性：现代浏览器（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 解法。
- ❌ 不要设置
