使用 position: sticky 结合 left: 0; right: 0; text-align: center，可让信息栏在浏览器缩放和水平滚动时始终保持水平居中，且始终位于表格容器内、滚动条上方，无需硬编码宽度或 JavaScript。
使用 `position: sticky` 结合 `left: 0; right: 0; text-align: center`，可让信息栏在浏览器缩放和水平滚动时始终保持水平居中，且始终位于表格容器内、滚动条上方，无需硬编码宽度或 javascript。
要解决“信息栏需在缩放（Ctrl+/−）和水平滚动时均保持居中，且必须位于滚动条上方、不可脱离容器”的双重约束，关键在于跳出 relative 与 absolute 的二元选择——它们分别在缩放或滚动场景下失效。正确解法是采用现代 CSS 的 position: sticky。
sticky 定位兼具流式布局的响应性与固定定位的粘性行为：元素在常规文档流中渲染（因此天然适配缩放），当其父容器（即 .tableWrapper）发生滚动时，它会相对于该容器“吸附”在指定边界（如 left: 0; right: 0），从而在滚动过程中维持视觉居中；而由于它未脱离文档流，其宽度和位置仍受父容器尺寸及缩放比例影响，完美兼容不同分辨率与用户缩放级别。
✅ 正确实现方式如下：
.tableWrapper {
position: relative; /* 确保 sticky 元素有明确的包含块 */
overflow-x: auto;
width: 400px; /* 支持动态宽度，如设为 100% 或 max-width */
height: 100px;
}
.infoDiv2 {
position: sticky;
left: 0;
right: 0;
text-align: center;
margin-top: 8px; /* 可选：与表格保持间距 */
padding: 6px 12px;
background: #f8f9fa;
border: 1px solid #dee2e6;
font-size: 14px;
}
<div class="tableWrapper">
<table class="table">
<thead><tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<!-- ... 更多列 -->
</tr></thead>
<tbody><!-- 数据 --></tbody>
</table>
<div class="infoDiv2">No Results Found</div>
</div>
⚠️ 注意事项：
-
.tableWrapper必须设置position: relative（或absolute/fixed），否则sticky将基于视口而非容器定位，导致居中失效； -
left: 0; right: 0是核心——它使元素拉伸至容器宽度，配合text-align: center实现内容居中；若仅设left: 50%; transform: translateX(-50%)，则在滚动时可能偏移； - 该方案完全 CSS 驱动，无需监听
scroll或resize事件，性能高效； - 兼容性方面：Chrome 56+、Firefox 59+、Safari 15.4+、Edge 79+ 均原生支持（旧版 Safari 需加
-webkit-sticky前缀）； - 若表格宽度动态变化（如响应式
min-width: max-content），.tableWrapper应避免固定width，改用width: 100%或max-width，确保sticky区域随容器自适应。
综上，position: sticky 是唯一能同时满足“缩放响应性”与“滚动稳定性”的纯 CSS 方案，兼顾语义清晰、维护成本低与跨设备一致性。
