使用 position: sticky 结合 left: 0; right: 0; text-align: center，可让信息栏在浏览器缩放和容器水平滚动时始终保持动态水平居中，且严格位于滚动条上方，无需硬编码宽度。
使用 `position: sticky` 结合 `left: 0; right: 0; text-align: center`，可让信息栏在浏览器缩放和容器水平滚动时始终保持动态水平居中，且严格位于滚动条上方，无需硬编码宽度。
要解决“信息栏需在缩放（Ctrl+/−）和水平滚动时始终居中，且不可置于滚动条下方”这一典型布局难题，关键在于跳出 relative 与 absolute 的二元思维——二者分别在缩放或滚动场景下失效，而现代 CSS 提供了更优雅的解法：position: sticky。
sticky 定位兼具流式布局的响应性与固定定位的粘性行为：元素默认随文档流渲染，但当其父容器（最近的滚动祖先）发生滚动时，它会相对于该容器“粘住”在指定偏移位置；更重要的是，它的定位基准是视口缩放后的计算值，因此天然适配缩放变化。
以下是推荐实现方案：
.tableWrapper {
position: relative; /* 确保 sticky 元素有明确的包含块 */
overflow-x: auto;
width: 400px; /* 支持任意宽度，此处仅为示例 */
height: 100px;
}
.infoDiv {
position: sticky;
left: 0;
right: 0;
text-align: center;
margin-top: 8px; /* 可选：与表格保持间距 */
padding: 6px 12px;
background-color: #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>
<th>Column 4</th>
<th>Column 5</th>
<th>Column 6</th>
<th>Column 7</th>
<th>Column 8</th>
<th>Column 9</th>
<th>Column 10</th>
</tr>
</thead>
<tbody></tbody>
</table>
<div class="infoDiv">No Results Found</div>
</div>✅ 核心优势说明：
-
缩放兼容：
left: 0; right: 0让浏览器自动计算居中宽度，缩放时布局重排自然生效； -
滚动同步：sticky 元素随
.tableWrapper滚动而“吸附”于容器内，始终视觉居中（非绝对像素偏移）； -
位置约束：严格位于
.tableWrapper内部，绝不会出现在滚动条下方； -
动态适配：无需预设表格宽度，对任意
width或响应式变化均鲁棒。
⚠️ 注意事项：
- 父容器
.tableWrapper必须声明position: relative（或absolute/fixed），否则 sticky 会向上查找最近的定位祖先，可能导致意外行为； - 不支持 IE 浏览器（IE 完全不支持 sticky），如需兼容 IE，请结合 JavaScript 监听
scroll和resize事件动态计算transform: translateX()； - 若
.infoDiv高度影响滚动容器高度，建议设置flex-shrink: 0或显式height避免布局抖动。
此方案以纯 CSS 实现零 JS 依赖、高可维护性的动态居中，是现代 Web 表格空状态提示的理想实践。
